文章の目录

• 一、动态匹配路由的基本用法
• • 1、思考：
  • 2、应用场景：通过动态路由参数的模式进行路由匹配
• 二、路由组件传递参数
• • 1、props的值为布尔类型
  • 2、props的值为对象类型
  • 3、props的值为函数类型
• 写在最后

一、动态匹配路由的基本用法

1、思考：

<router-link to="/user/1">User1</router-link><router-link to="/user/2">User2</router-link><router-link to="/user/3">User3</router-link>

// 定义如下三个对应的路由规则，是否可行？？？{ path: "/user/1", component: User },{ path: "/user/2", component: User },{ path: "/user/3", component: User }

2、应用场景：通过动态路由参数的模式进行路由匹配

var router = new VueRouter({routes: [// 动态路径参数 以冒号开头{ path: "/user/:id", component: User }]});

const User = {// 路由组件中通过$route.params获取路由参数template: "User {{ $route.params.id }}"};

二、路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦

1、props的值为布尔类型

// 创建路由实例对象const router = new VueRouter({// 所有的路由规则    // 如果 props 被设置为 true，route.params 将会被设置为组件属性routes: [{ path: "/user/:id", component: User, props: true }]});

const User = {props: ["id"], // 使用 props 接收路由参数template: "用户ID：{{ id }}" // 使用路由参数};

2、props的值为对象类型

// 创建路由实例对象const router = new VueRouter({// 所有的路由规则routes: [// 如果 props 是一个对象，它会被按原样设置为组件属性{ path: "/user/:id", component: User, props: { uname: "lisi", age: 20 } }]});

const User = {props: ["uname", "age"],template: "用户信息：{{ uname + '---' + age}}"};

3、props的值为函数类型

// 创建路由实例对象const router = new VueRouter({// 所有的路由规则routes: [// 如果 props 是一个函数，则这个函数接收 route 对象为自己的形参{path: "/user/:id",component: User,props: route => ({ uname: "zs", age: 20, id: route.params.id })}]});

const User = {props: ["id", "uname", "age"],template: "用户信息：{{ uname + '---' + age + '---' + id}}"};

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！