前沿:
上面我们定义的路由，都是严格匹配的:
只有router-link 中的to属性和 js 中一条路由route中 path 一模一样，
才能显示相应的组件component. 但有时现实却不是这样的，
例如: 如下的需求:
当我们访问网站并登录成功后，它会显示 " 欢迎你，+ 你的名字" 。
不同的用户登录， 只是显示“你的名字” 部分不同，其它部分是一样的。
这就表示，它是一个组件，假设是user组件。不同的用户（就是用户的id不同），它都会导航到同一个user 组件中。这样我们在配置路由的时候，就不能写死, 就是路由中的path属性，
那我们接下来就看看动态路由应该如何设置:
1. 动态路由的配置
1.1 回顾node中的动态路由
其实在之前的node课程中,就提到多动态路由的配置,
例如:
我希望 用来在访问/students/100001和/students/100002的时候
都能匹配到同一个路由,走同一个路由处理函数, 咱们就得定义/students/:sid的路由
此时:sid就是动态的部分,这条路由就是动态路由,同时可以利用req.params.sid来获取路由的不同部分的数据
1.2 vue-router中动态路由
vue-router中动态路由的定义和node差别不太,唯一的差别就在动态路由参数的获取,先看动态路由的定义:
组件信息
<!-- 首页组件 -->
<template>
<div id="home">
<h2>首页</h2>
<p>首页页面</p>
</div>
</template>
<!-- 用户组件 -->
<template>
<div id="user">
<h2>用户</h2>
<p>用户页面</p>
</div>
</template>
配置动态路由
// router.js文件
// 配置路由映射关系
const routes = [
{
path:'/',
redirect: "/home"
},
{
path:'/home',
component: Home
},
{
path:'/user/:uname',
component: User
},
];
路由使用
<!-- app.vue 文件 -->
<div id="app">
<router-link to="/home">首页</router-link>
<!-- 增加两个到user组件的导航，使用不同的to属性 -->
<router-link to="/user/zhangsan">用户张三</router-link>
<router-link to="/user/lisi">用户李四</router-link>
<router-view></router-view>
</div>
通过示例的展示结果, 当你点击用户张三或者用户李四都能进入到User组件中
路由/user/:uname就是一个动态的路由,
在:uname部分为任何值都可以匹配到这个路由, 也都会展示User组件
那么问题来了, 在动态路由中，怎么获取到动态部分？
如果不能获取动态的值,如果在页面中展示欢迎谁呢
2. 动态路由参数的获取
2.1 动态路由参数获取的认识
其实，当整个vue-router 注入到根实例后，在组件的内部，可以通过this.$route 来获取到 router 实例。
它有一个params 属性，就是来获得这个动态部分的。
我们可以在计算属性中打印组件实例,看看组件实例上关于$route的值是什么
User组件中:
export default {
name:"user",
computed:{
username(){
console.log(this) // 组件实例
return 123
}
}
}
打印结果:
image
通过打印结果就知道
- 组件实例对象上有一个
$route属性,这个属性的值是一个对象 -
$route对象中path属性就是最终匹配成功的路径 -
$route对象中params属性就是动态路由数据, 是以键值对的形式获取
2.2 获取动态路由参数
修改用户组件,展示欢迎信息
<template>
<div id="user">
<h2>用户</h2>
<p>用户页面</p>
<p>欢迎你: {{ username }}</p>
</div>
</template>
<script>
export default {
name:"user",
computed:{
username(){
return this.$route.params.uname
}
}
}
</script>
此时当你切换内容的时候,就会显示不同的信息
也可以直接将内容渲染到页面
代码如下
<template>
<div id="user">
<h2>用户</h2>
<p>用户页面</p>
<!-- 在模板中使用数据不用加this -->
<p>欢迎你: {{ $route.params.uname }}</p>
</div>
</template>
<script>
export default {
name:"user",
}
</script>
3. $route监听
这里还有一个问题，就是动态路由在来回切换时，由于它们都是指向同一组件，vue不会销毁再创建这个组件.而是复用这个组件，
因此,当第一次点击 用户张三 的时候，vue 把对应的组件渲染出来，但在用户张三, 用户李四点击来回切换的时候，这个组件就不会发生变化了。
这时如果想要在组件来回切换的时候做点事情，那么只能在组件内部（user.vue中）利用watch 来监听$route 的变化。把上面的代码用监听$route 实现
<script>
export default {
data () {
return {
dynamicSegment: ''
}
},
watch: {
$route (to,from){
// to,from表示User组件内$route的改变
console.log(to);
console.log(from);
this.dynamicSegment = to.params.id
}
}
}
</script>
4. 关于router-link中的to属性
说明:
- 在当前示例中,我们使用了,两个路由导航,真实的案例中可能就只有一个导航
- 根据登录的用户不同,router-link中的to属性指定的路由为不同的路由
- 那么我们就需要让router-link中to属性成为动态改变
修改示例:
<template>
<div id="app">
<router-link to="/home">首页</router-link>
<!-- 动态to属性 -->
<router-link :to="'/user/' + uname">用户</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
uname:"张三",
}
}
}
</script>
示例说明:
- to属性使用了v-bind动态绑定,因此to属性值不在是字符串,而是表达式
- 因此在表达式中把
'/user/'字符串和uname变量组合为不同的路由 -
uname变量根据data中的数据发生改变, 不用的用户登录,uname就为不同的数据,可以从表单中获取.
这样我们就可以通过数据动态改变路由, 一个导航实现了动态路由处理.
网友评论