文章の目录
一、动态匹配路由的基本用法
1、思考：
<!-- 有如下 3 个路由链接 -->
<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: "<div>User {{ $route.params.id }}</div>"
};
二、路由组件传递参数
$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: "<div>用户ID：{{ id }}</div>" // 使用路由参数
};
2、props的值为对象类型
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
// 如果 props 是一个对象，它会被按原样设置为组件属性
{ path: "/user/:id", component: User, props: { uname: "lisi", age: 20 } }
]
});
const User = {
props: ["uname", "age"],
template: "<div>用户信息：{{ uname + '---' + age}}</div>"
};
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: "<div>用户信息：{{ uname + '---' + age + '---' + id}}</div>"
};