动态路由的传参

动态路由

定义：我们经常需要把某种模式匹配到的所有路由，全部映射到同个组件，例如，我们一个User组件，对于所有id个不同的用户，都需要这个组件来渲染

//动态路由设置
    {path:'/user/:id/:name/:age',component:User}
    
    
        <router-link to="/user/1/tom/18">user menu  &nbsp &nbsp &nbsp</router-link>
        <router-link to="/user/2/bob/20">user menu  &nbsp &nbsp &nbsp</router-link>
        <router-link to="/user/3/may/22">user menu  &nbsp &nbsp &nbsp</router-link>

动态路由传参

①params传参

1.//定义动态路由
{path:'/user/:id/:name/:age',component:User}

2.//传输参数
<router-link to="/user/1/tom/18">user-1  &nbsp &nbsp &nbsp</router-link>
        <router-link to="/user/2/bob/20">user-2  &nbsp &nbsp &nbsp</router-link>
        <router-link to="/user/3/may/22">user-3  &nbsp &nbsp &nbsp</router-link>

 

3.//接收参数
<div>
        <p>用户id---{{$route.params.id}}</p>
        <p>用户名称---{{$route.params.name}}</p>
        <p>用户年龄---{{$route.params.age}}</p>
    </div>

②props传参

值为布尔值形式

1.//定义动态路由
{path:'/user/:id/:name/:age',component:User,props:true}
​

2.//传输参数
        <router-link to="/user/2/bob/20">user-2  &nbsp &nbsp &nbsp</router-link>
        <router-link to="/user/3/may/22">user-3  &nbsp &nbsp &nbsp</router-link>

3.//接收参数
  props:['id','name','age']

值为函数的形式

1.//定义动态路由
{
        path:'/user',
        name:'user',
        component: User,
        props:function (route) {//route是指当前路由信息对象
            return {
                id:route.params.id,
                name:route.params.name,
                age:route.params.age
            }
        }
    }

2.//传输参数
 <router-link v-bind:to="{name:'user',params:{id:4,name:'text',age:26}}">user-4  &nbsp &nbsp &nbsp</router-link>

3.//接收参数
    props:['id','name','age']

动态路由切换时的特点：动态路由当路由发生切换时，并不会重新渲染路由组件，而会使用已经渲染过的路由组件（只是会修改路由参数值），这样增加的程序的高校及时性；另一方面，组件的生命周期钩子回调函数将不会再次调用

如何解决？

组件中的数据通信

1.父子组件之间的数据通信

①第一种：父-->子 props传递数据；子-->父 触发自定义的形式

②第二种：provide....inject结构 父组件provide抛出数据，子组件inject接收数据

2.非父子组件之间的数据通信

①第一种：事件总线Bus（空vue对象）

②第二种：状态管理库vuex