Vue router changing the url but not the content - javascript

In Songs component I have a list of other albums, so whenever I click on one it should redirect me on /songs/:id. Each album has it's own id.
This is working from Home or any other component, but whenever I try to go from for example /songs/1 to /songs/2, it doesn't work. The URL changes but the webpage stays the same.
Here is my router index.js file.
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/songs/:id',
name: 'Songs',
component: () => import('../views/Songs.vue')
},
{
path: '/videos/:title/:index',
name: 'Videos',
component: () => import('../views/Videos.vue')
}
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
I was googling a little but nothing seems to work for me.

Import your song.vue in index.js
import Songs from '../views/Songs.vue'
Check your ../views/Songs.vue
yourlocalhost.url/mainapp/songs/1
Where '1' is a parameter named 'id' (url like /song/:id), try with:
this.$route.params.id

Related

Routing between two components in Vue.js

Well, this is my App.vue:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<Home/>
<AddService/>
</div>
</template>
<script>
import Home from './components/Home.vue'
import AddService from './components/AddService.vue'
import Vue from 'vue'
import VueRouter from 'vue-router'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/addService',
name: 'addService',
component: AddService
}
]
});
Vue.use(router)
export default {
name: 'App',
components: {
Home
}
}
</script>
I'd like to route between the Home and AddService Component. My Home page has a link which is basically this: Add a new Service
And if I press on this link I should get redirected to the AddService Component. But at the moment it only adds the right url in the search bar but I don't get redirected
When using Vue router you are not supposed to make your own anchor tags with hrefs for navigation. To navigate you can use the router-link component.
If you want to programmatically navigate you can use the push method on the router.
Your App.vue should look like this
<template>
<div id="app">
<router-view />
</div>
</template>
Your index.js should look like this
import Vue from 'vue'
import App from '#/App.vue'
import VueRouter from 'vue-router'
import Home from '#/components/Home'
import AddService from '#/components/AddService'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/add-service',
name: 'Add Service',
component: AddService
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
new Vue({
el: '#app',
router,
render: h => h(App)
}).$mount('#app')
BUT best practise is to use an external router/index.js file to declare all your routes and import to the index.js(main app file) and use it when you declare new Vue instance.
After that you can have router-link in your code as
<router-link to="path">
or navigate programmaticaly with
this.$router.push({ name: AddService })
or
this.$router.push({ path: '/' })

VueJs Router: App.vue Component shows up on every page

I'm working with currently with the Vue Router, but when I write something in App.vue it shows up on every page, why?
The app.vue will always render since it's the main component. To display a content specific to the page, you should use <router-view />. It will render the component you define on your route file. Here is the example
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Auth/Login.vue'
import Register from '../views/Auth/Register.vue'
import LandingPage from '../views/LandingPage.vue'
const routes = [
{
path: '/',
name: 'LandingPage',
component: LandingPage
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/register',
name: 'Register',
component: Register
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router

Vue js Routers how to open a page when following a specific link

I am studying Vue JS and I have problems with routers, I want certain content to open when writing on the page address for example "Home", and more precisely, I have a component called HomePage, I want to open this component when writing in url " Home "for example "http://localhost:8080/Home" and by default, if nothing is specified in the address, then an empty page would open
App.vue
<template>
<HomePage></HomePage>
</template>
<script>
import HomePage from "#/View/HomePage/HomePage";
export default {
name: 'App',
components: {
HomePage
}
}
</script>
Edit
App.vue
<template>
<HomePage>
<router-view />
</HomePage>
</template>
<script>
import HomePage from "#/View/HomePage/HomePage";
export default {
name: 'App',
components: {
HomePage,
}
}
</script>
Index.js
import Vue from 'vue'
import Router from 'vue-router'
import HomeRoute from '#/components/routes/HomeRoute'
import Rar from "./src/View/Rar";
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/home',
name: 'HomeRoute',
alias: '*',
component: HomeRoute
},
{
path: '/Rar',
name: 'Rar',
component: Rar
}
]
})
export default router
You should specify a path inside your routes.
Steps
Your main app.vue should look like this
<div>
<navbar />
<router-view />
<footer />
</div>
</template>
make a folder router and inside an index.js (or more structured files)
It must look like this
import Vue from 'vue'
import Router from 'vue-router'
import HomeRoute from '#/components/routes/HomeRoute'
import AboutRoute from '#/components/routes/AboutRoute'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/home',
name: 'HomeRoute',
alias: '*',
component: HomeRoute
},
{
path: '/about',
name: 'About',
component: AboutRoute
}
]
})
export default router
The first path is the '/home' with alias *.
if you type '/home' in the url you will go to the main page.
Also the alias: '*' means that everything you type after will redirect you to this route, unless it finds another route registered
You are missing some code from main.js.
I cannot see Vue getting initalized anywhere.
You should import router in your main.js and use .use(router) in there
App.vue
<template>
<router-view />
</template>
/router/index.js
import Router from 'vue-router'
import HomeRoute from '#/components/routes/HomeRoute.vue'
const router = new Router({
routes: [
{
path: '/home',
component: HomeRoute
}
]
})
export default router
main.js
import Vue from 'vue'
import App from "./App.vue";
import router from '#/router'
const app = Vue.createApp(App)
app.use(router)
app.mount('#app')
You can check your HomePage component. Does it has slot that you put router-view there? What if you use simple router-view without HomePage? Did you register router in your main app.js?
And if I correctly understand you, you can do something like this to manage your routes in index.js
const router = new Router({
routes: [
{
path: '/',
beforeEnter: (from, to, next) => next({path: '/home'})
},
{
path: '/home',
name: 'HomeRoute',
component: HomeRoute
}
]
})
Read about VueRouter hooks https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards
Also you can use children:
import HomeLayout from '#/layouts/HomeLayout.vue'
import HomePage from '#/views/HomePage.vue'
import HomeAbout from '#/views/HomePage.vue'
const router = new Router({
routes: [
{
path: '/',
beforeEnter: (from, to, next) => next({path: '/home'})
},
{
path: '/home',
component: HomeLayout,
children: [
// full url will be like: localhost:8080/home
{
path: '',
name: 'Home',
component: HomePage
},
// full url will be like: localhost:8080/home/about
{
path: 'about',
name: 'HomeAbout',
component: HomeAbout
}
]
}
]
})

Parent path is automatically removed from URL in VueJs

I have this weird problem with VueJs2 (cli 3) version, which is that Vue automatically removes parent path from URL.
I have following routes in routes.js file
import Home from "../views/Home";
import Login from "../views/Login";
const router = [
{
path: '/wh',
component: {
template: '<router-view></router-view>'
},
children: [
{
path: "/home",
name: "home",
component: Home
},
{
path: "/login",
name: "login",
component: Login
},
],
},
];
export default router;
And this is my router.js file
import Vue from "vue";
import Router from "vue-router";
import routes from './routes'
Vue.use(Router);
const router = new Router({
mode: 'history',
routes: routes,
scrollBehavior(to, from, savedPosition) {
return {x: 0, y: 0}
}
});
My main.js where I include router
import App from "./App.vue";
import router from "./router/router";
import store from "./store/store";
new Vue({
store,
router,
render: h => h(App)
}).$mount("#app");
And my vue.config.js
module.exports = {
devServer: {
proxy: "http://my.app.test"
},
outputDir: "public/assets/myApp/app/",
filenameHashing: true,
runtimeCompiler: true,
productionSourceMap: true,
};
The problem is following. /wh is always missing in url param. What ever I click or do I get automatically redirected to login page /wh is missing and my app is working flawlessly. I have already tried to set publicPath: '/wh' in vue.config.js and everything was working same as now. So how to properly configure my routes so I will see /wh in my URL, before other children paths?
If you need any additional information's, please let me know and I will provide. Thank you!
Add in index.html in <head> section <base href="/wh/" />

Vuejs 2 router not working programatically but, working as router link

index js file
I used vue router programatically but it didn't working for me.I searched through the web and everyone used this.$router.push().
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '#/components/HelloWorld'
import BecomeHost from '#/components/BecomeHost'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/become_host',
name: 'BecomeHost',
component: BecomeHost
}
]})
component.vue
I called like below when response sucess but not working
if (res.data.status === 'success') {
localStorage.setItem('user', JSON.stringify(res.data.data))
let user = JSON.parse(localStorage.getItem('user'))
this.setUserData(user)
this.$router.push('/become_host')
}
you can try it like below
this.$router.push({path: 'become_host'})
// or
this.$router.push('BecomeHost')
You can use push with props, more details here
In your case I think, you need something like this:
this.$router.push({ path: 'become_host' })
OR
this.$router.push({ name: 'BecomeHost' })

Categories