一.动态路由
在某些情况下,一个页面的path路径可能是不确定的,比如我们进入用户界面时,希望是如下路径
- /user/aaaa或/user/bbbb
- 除了有前面的/user之外,后面还跟上了用户的ID
- 这种path和Component的匹配关系,称之为动态路由
具体实现代码如下:
1.首先我们需要在router文件夹下的index.js下,添加新的映射关系
const routes = [
{
path:'/user/:abc', // abc可以替换成其他的名字
component: User
},
2.在App.vue文件下,添加新的router-link
<template>
<div>
<router-link to="/hello">首页</router-link>
<router-link :to="'/user/'+ userId">用户</router-link> // 使用v-bind指令将script中的数据传入
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
userId:'lisi'
}
}
}
3.我们希望在最终页面显示传入的userId: 需要在路由组件user.vue中使用$route.params.abc
,abc是可变的,有index.js中的路径设置
<template>
<div>
<h2>我是用户</h2>
<p>我是用户界面</p>
<p>{{userId}}</p>
</div>
</template>
<script>
export default {
name:'User',
computed:{
userId() {
return this.$route.params.abc
}
}
}
</script>
注意:
- $route表示当前活跃的映射,谁活跃就取谁的对象;
- 而$router表示最初new的路由实例