params 傳參
router.js
...
{
path: "/user/:id", // path后面要加上參數(shù)
name: "user", // name是必須的
component: () => import("../views/User") //懶加載組件
}
...
User.vue
//組件中
<router-link to="/user/123"> 跳轉(zhuǎn)</router-link>
<router-link :to="{ name: 'user', params: { id: 123 }}"> 跳轉(zhuǎn)</router-link>
//點(diǎn)擊事件中
this.$router.push({
name: "user",
params: {
id: '123' //id的值
}
});
點(diǎn)擊后路由效果為：
http://localhost:8080/#/user/123
頁面中獲取參數(shù)
this.$route.params.id
跳轉(zhuǎn)時(shí)候的值
router.beforeEach((to, from, next) => {
console.log(to.fullPath) // '/user/123'
console.log(to.path) // '/user/123'
})
query傳參
router.js
...
{
path: "user",
component: () => import("../views/User") //懶加載組件
}
...
User.vue
//組件中
<router-link :to="{ path:'/user', query: { id: 123} }"> 跳轉(zhuǎn)</router-link>
//點(diǎn)擊事件中
this.$router.push({
path: "/user", //要填寫完整的路徑
query: {
id: 123 //id的值
}
});
點(diǎn)擊后路由效果為：
http://localhost:8080/#/user?id=123
頁面中獲取參數(shù)
this.$route.query.id
跳轉(zhuǎn)時(shí)候的值
router.beforeEach((to, from, next) => {
console.log(to.fullPath) // '/user?id=123'
console.log(to.path) // '/user'
})
