一、动态路由
1.作用
通过动态路由参数的模式进行路由匹配
2.定义与使用
let router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/公共路径名/:[变化参数]', component: [组件名] }
]
})const 组件名 = {
// 路由组件中通过$route.params获取路由参数
template: '<div>组件名 {{ $route.params.[参数名] }}</div>'
}3.示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!-- 导入 vue 文件 -->
<script src="../../js/vue.js"></script>
<script src="../../js/vue-router.js"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
const User = {
// 属性名与后面路由规则中的参数一致（:后面的属性名）
// 使用 $route.params 变量访问指定组件
template: '<h1>用户id为: {{$route.params.id}}</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
// 默认主页
// path 中的 :id，其中 : 代表后面跟的参数是变量，变量名可以自定义，但是在模板中引用的时候需要写对应的属性名
{ path: '/user/:id', component: User }
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
</script>
</body>
</html>
二、路由传参（单值变量类型）
1.方法
设置 props 的值为布尔类型，以开启 props 传值
const router = new VueRouter({
routes: [
// 如果 props 被设置为 true， route.params 将会被设置为组件属性
{ path: '/user/:[属性名]', component: User, props: true }
]
})
const User = {
// 使用 props 接收路由参数
props: ['[属性名]'],
// 使用路由参数
template: '<div>用户ID： {{ [属性名] }}</div>'
}
2.示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<!-- 导入 vue 文件 -->
<script src="../../js/vue.js"></script>
<script src="../../js/vue-router.js"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
const User = {
// 指定传递数据的变量名
props: ['id'],
template: '<h1>用户id为: {{id}}</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
// :id 中的 id 与上面的 props 中的变量名对应
{path: '/user/:id', component: User, props: true}
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
</script>
</body>
</html>
三、路由传参（对象类型）
const router = new VueRouter({
routes: [
{ path: '/user', component: User, props: { 参数1名称: '参数1值', 参数2名称: '参数2值', ...... }}
]
})
const User = {
props: ['参数1名称', '参数2名称', ......],
template: ‘<div>{{ 参数1名称, 参数2名称, ...}}</div>'
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<!-- 导入 vue 文件 -->
<script src="../../js/vue.js"></script>
<script src="../../js/vue-router.js"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<router-link to="/user">User</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
const User = {
props: ['my_name', 'my_age'],
template: '<h1>姓名为:{{my_name}} --- 年龄为：{{my_age}}</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
// 使用 props 传递对象类型数据
{path: '/user', component: User, props: {my_name: '小红', my_age: 20}}
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
</script>
</body>
</html>
四、路由传参（函数类型）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<!-- 导入 vue 文件 -->
<script src="../../js/vue.js"></script>
<script src="../../js/vue-router.js"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
const User = {
props: ['my_name', 'my_age', 'nums'],
template: '<h1>姓名为:{{my_name}} -- 年龄为：{{my_age}} -- 组件序号为: {{nums}}</h1>'
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{
path: '/user/:nums_data',
component: User,
// 此处的 nums 参数可以直接使用 route.params 对象获取，而无需设置 props = true
props: route => ({my_name: '小张', my_age: 20, nums: route.params.nums_data})
}
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
</script>
</body>
</html>