Vue路由传参

vue路由传参是指嵌套路由时父路由向子路由传递参数，否则操作无效。传参方式可以划分为params传参和query传参，params传参又可以分为url中显示参数和不显示参数两种方式。

 params传参（url中显示参数）

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/one',
      name: 'ChildOne',
      component: ChildOne,
      children:[
        {
          path:'/one/log/:num',
          component:Log,
        },
        {
          path:'/one/reg/:num',
          component:Reg,
        },
      ],
    },
    {
      path: '/two',
      name: 'ChildTwo',
      component: ChildTwo
    }
  ]
})

在父路由组件上使用router-link进行路由导航，传参用的形式向子路由组件传递参数。

<template>
  <div style="border:1px solid red;color:red;">
    <p>这是父路由childOne对应的组件页面</p>
    <p>下面可以点击显示嵌套的子路由 </p>
    <router-link to="/one/log/123">显示登录页面</router-link>
    <router-link to="/one/reg/002">显示注册页面</router-link>
    <router-view></router-view>
  </div>
</template>

子路由通过 this.$route.params.num 的形式来获取父路由向子路由传递过来的参数

<template>
  <div style="border:1px solid orange;color:orange;">
    <p>登录界面：这是另一个嵌套路由的内容</p>
    <h3>{{this.$route.params.num}}</h3>
  </div>
</template>

效果

 params传参（url中不显示参数）

routes: [
    {
      path: '/one',
      name: 'ChildOne',
      component: ChildOne,
      children:[
        {
          path:'/one/log/',
          name:'Log',
          component:Log,
        },
        {
          path:'/one/reg/',
          name:'Reg',
          component:Reg,
        },
      ],
    },

<template>
  <div style="border:1px solid red;color:red;">
    <p>这是父路由childOne对应的组件页面</p>
    <p>下面可以点击显示嵌套的子路由 </p>
    <router-link :to="{name:'Log',params:{num:666}}">显示登录页面</router-link>
    <router-link :to="{name:'Reg',params:{num:888}}">显示注册页面</router-link>
    <router-view></router-view>
  </div>
</template>

<template>
  <div style="border:1px solid orange;color:orange;">
    <p>登录界面：这是另一个嵌套路由的内容</p>
    <h3>子路由获取的参数：{{this.$route.params.num}}</h3>
  </div>
<template>

这种利用params不显示url传参的方式会导致在刷新页面的时候，传递的值会丢失；

 使用Query实现路由传参在组件中使用 $route 会使之与其对应路由形成高度耦合，
 从而使组件只能在某些特定的 URL 上使用，限制了其灵活性，使用 props 将组件和路由解耦

<template>
  <div style="border:1px solid red;color:red;">
    <p>这是父路由childOne对应的组件页面</p>
    <p>下面可以点击显示嵌套的子路由 </p>
    <router-link :to="{path:'/one/log',query:{num:123}}">显示登录页面</router-link>
    <router-link :to="{path:'/one/reg',query:{num:999}}">显示注册页面</router-link>
    <router-view></router-view>
  </div>

子路由组件通过 this.$route.query.num 来显示传递过来的参数

<template>
  <div style="border:1px solid purple;color:purple;">
    <p>注册界面：这是二级路由页面</p>
    <h3>{{this.$route.query.num}}</h3>
  </div>
</template>

     通过 vuex

export default new Vuex.Store({
    state:{
             id: ''
      },
      mutations:{
           setId(state ,  id) {
                   state.id = id            
             }
        }
})

// 在a页面设置
 this.$store.commit( 'setId' ，(123) )

// 在b页面取
this.$store.state.id