vue-router 参数传递

通过代码的方式修改路由

btnClick(){
    this.$router.push('/home')
}


data(){
    return {
        userId:‘yyqx’
    }
}

userClick(){
 this.$router.push('/user/'+this.userId)    
}

路由懒加载

const manage = () => import( '../views/Manage.vue')

  {
    path: '/manage',
    name: 'ManagePage',
    component: manage
  }

传递参数的方式，params query

params的类型：

//子组件中：

//接受参数的方式为：
this.$router.params.id

配置路由的格式：/router/:id

{
    path:'/user/:id',
    component:User
}

传递的方式：在path后面跟上对应的值

传递后形成的路径：/router/123

query的类型

btnClick(){
    this.$router.push({
        path:'/profile',
        query:{
            name:'kobe',
            age:19
        }
    })
}

配置路由的格式：对象中，使用query的Key作为传递方式

传递后形成的路径：/router？id=123

路由守卫

  {
    path: '/manage',
    name: 'ManagePage',
    component: manage，
    meta:{
        title:'用户信息'
    }
  }