vue 多级路由及路由传参

一 嵌套路由

《1 定义路由
其中

const router = new VueRouter({
  routes: [
    { 
      path: '/user/:id', 
      component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

《 2 访问
https://xxx.com/user/1
https://xxx.com/user/1/profile
https://xxx.com/user/1/posts

二 URL传参

《1 动态路由传参
《1.1 定义路由

const router = new Router({
    mode: 'history', 
    routes: [
        {
            path: '/modifyusername/:name',
            name: 'modifyusername',
            component: UserCenter,
            meta: {
                title: '修改用户名'
            }
        },
    ]
})

《1.2 传参
https://xxx.com/modifyusername/mynewname

《1.3获取参数
this.$route.params.name

《2 query 传参
《2.1 传参
https://xxx.com?tradeNo=123456

《2.2 获取参数
this.$route.query.tradeNo

三 引用

https://router.vuejs.org/zh/