vue2 - router子路由，query方式传递参数，params方式传递参数，路由中的props

1.router 子路由

export default new VueRouter({
  routes: [
    {
      path: "/home",
      component: AppHome,
      name: "AppHome",
      children: [
        //子路由 /home/show1
        {
          path: "show1",
          component: AppShow,
          name: "AppShow"
        },
        // home/show2
        {
          path: "show2",
          component: AppShow,
          name: "AppShow"
        }
      ]
    }
  ]
})

 

2.query方式传递数据

    <!-- 跳转并携带query参数，to的字符串写法 不能从data中获取数据-->
    <router-link to="/home/message/detail?id=666&title=你好">跳转</router-link>

    <!-- 跳转并携带query参数，to的对象写法 可以从data中获取数据 推荐这种方式-->
    <router-link
        :to="{
        path:'/home/message/detail',
        query:{
           id:666,
            title:'你好'
        }
    }"
    >跳转</router-link>

query方式传递参数获取数据

this.$route.query.id
this.$route.query.title

 

3.params方式传递参数

    <!-- 跳转并携带params参数，to的字符串写法 不能从data中获取数据-->
    <router-link to="/home/12/levi">跳转</router-link>

    <!-- 跳转并携带params参数，to的对象写法 可以从data中获取数据 推荐这种方式-->
    <router-link
        :to="{
        //必须使用name的方式 跳转到组件name为home的组件
        name:'home',
        params:{
           id:12,
           title:'levi'
        }
    }"
    >跳转</router-link>

export default new VueRouter({
  routes: [
    {
      path: "/home/:id/:name",
      component: AppHome,
      name: "home",
    }
  ]
})

params方式传递参数获取数据

this.$route.params.id
this.$route.params.name

 

4.路由中的props

CSDN-Vue-router路由的props配置