（四十四）Vue Router的命名路由和路由组件传参

上一篇：（四十三）Vue Router之嵌套路由

命名路由

命名路由是为路由配置项提供一个名称，以便在代码中引用该路由。通过为路由配置项添加name属性，可以为路由指定一个唯一的名称。

配置：

const router = new VueRouter({
  routes: [
    {
      path: '/path1',
      name: 'name2', // 命名路由为 'name1'
      component: Component1,
    },
    {
      path: '/path2',
      name: 'name2', // 命名路由为 'name2'
      component: Component2,
    },
  ],
});

使用：

<router-link :to="{name:'name1'}"></router-link>
<router-link :to="{name:'name2'}"></router-link>

组件传参

query参数方式

参数传递

• 字符串写法

<router-link :to="`/xxx?param1=${param1}&param2=${param2}`">
	query跳转携带参数
</router-link>

• 对象写法

<router-link :to="{
          path:'/xxx',
          query:{
            param1:param1,
            param2:param2
          }
        }">
    query跳转携带参数
</router-link>

参数接收

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

params参数方式

参数传递

• 占位符形式

const router = new VueRouter({
  routes: [
    {
      path: '/xxx/:param1/:param2',
      component: Component,
    },
  ],
});

<router-link :to="`/xxx/${param1}/${param2}`">
   	params跳转携带参数
</router-link>

• 对象写法

<router-link :to="{
          name:'detail',
          params:{
            param1:param1,
            param2:param2
          }
        }">
    params跳转携带参数
</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

参数接收

   $route.params.id
   $route.params.title

props配置方式

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

使用 props 将组件和路由解耦，props配置将会把参数以props的方式传递到目标组件，该配置属性可以是布尔值、对象或函数

布尔值形式

如果 props 被设置为 true，把路由组件收到的所有params参数，以props传递过来。

const router = new VueRouter({
  routes: [
    {
      path: '/path1',
      props: true, // 把路由组件收到的所有params参数，以props传给Component组件。
      component: Component,
    },
  ],
});

对象模式

props对象写法，对象中所有的数据都以props传递过来。

const router = new VueRouter({
  routes: [
    {
      path: '/path1',
      props: {
            param1:param1,
            param2:param2
      },
      component: Component,
    },
  ],
});

函数模式

props函数写法，该函数返回的对象中每一组数据都会通过props传递过来，可以配合query和params使用

const router = new VueRouter({
  routes: [
    {
      path: '/path1',
      props($route){
         return {
              param1:$route.query.param1,
              param2:$route.params.param2
          }
      }
      component: Component,
    },
  ],
});