传参和动态路由
使用query传参
<router-link to="/ChildB?name=admin">ChildB-admin</router-link>
<router-link to="/ChildB?name=zhangsan">ChildB-zhangsan</router-link>
在ChildB组件中用watch监听传参$route.query，msg来表示相应传参对应的值
watch: {
/* 通过计算属性也可以实现，计算属性具有缓存功能
全局的路由属性$route发生了变化，也会触发计算属性*/
$route: {
handler() {
if (this.$route.query.name == "admin") {
this.msg = "欢迎admin管理员";
} else if (this.$route.query.name == "zhangsan") {
this.msg = "欢迎zhansgan贵宾一位,请上三楼";
}else{
this.msg = "您还不是会员，请充值";
}
},
/* 进入ChildB组件就执行 */
immediate:true
},
}
动态路由传参
<router-link to="/ChildA/1">ChildA--1</router-link>
<router-link to="/ChildA/2">ChildA--2</router-link>
第一种方式
main,js文件中对应 path: '/childA/:id'
在ChildA组件中用watch监听传参$route.params，msg来表示相应传参对应的值
watch:{
$route:{
handler(){
if(this.$route.params.id==1){
this.msg='我是id1'
}
if(this.$route.params.id==2){
this.msg='我是id2'
}
},
immediate:true /* 一进入组件就执行 */
}
}
也可以使用计算属性的写法
computed: {
str() {
let id = this.$route.params.id;
if (id == 1) {
return "我是id1";
} else if (id == 2) {
return "我是id2";
} else {
return "";
}
第二种方式
main,js文件中对应 path: '/childA/:id',props: true,
在childA里可以使用props接收传参
props:['id'],
if (this.id == 1) {
return "我是id1";
} else if (this.id == 2) {
return "我是id2";
} else {
return "";
}
添加路由
addR(){
this.$router.addRoute({
path:'/vip',
name:"vip",
component:()=>import('@/views/VipView.vue')
})
}
添加子路由
addA(){
/* 这里的about是name不是path */
this.$router.addRoute('about',{
path:'AboutChildC',
name:'AboutChildC',
component:()=>import('@/views/AboutChildC.vue')
})
}
$route 和 $router的区别
$route可以获取路由的属性 比如query传参 动态路由
$router提供了一些方法，push跳转页面，addRoute增加路由 包括一些路由信息，比如当前所在路由$router.currentRoute
页面跳转
goAbout(){
/* 只跳转一次，多次会报错 在router中可以解决 */
/* 第一种方式： this.$router.push('/about') */
第二种方式： this.$router.push({name:'about'})
}
解决多次报错的方法是在main.js文件中加上如下片段：本质上就是不报错，捕获错误信息
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(to) {
return VueRouterPush.call(this, to).catch(err => err)
}
全局路由钩子函数
全局路由守卫
router.beforeEach((to, from, next) => {
/* to表示要去的路由
from表示之前的路由
next表示要去执行的行数 */
/* console.log('to',to);
console.log('from',from);
console.log('next',next); */
next()
})
监听全局路由离开时触发的钩子函数,★没有next()
router.afterEach((to,from)=>{
console.log(to);
console.log(from);
})
局部路由钩子
{
path: '/childB',
name: 'childB',
component: () => import(/* webpackChunkName: "about" */ '../components/ChildB.vue'),
/* 局部的路由钩子函数进入路由的时候触发 */
因为参数或者是动态路由，在同一个路由下不会触发beforeEnter
beforeEnter: (to, from, next) => {
/* console.log('to',to);
console.log('from',from);
console.log('next',next); */
next()
}
}
