动态路由
程序员文章站
2022-06-03 18:26:02
...
在某些情况下,一个页面的path路径可能不确定,动态确定。
比如我们进入用户登录界面时,希望路径是:/user/name,也就是除了前面的/user还要跟上用户的id。这种path和component的匹配关系,叫动态路由(路由传递数据的一种方式)。
定义一个user组件:
<template>
<div>
<h1>我是用户</h1>
</div>
</template>
<script>
export default {
name: "user",
}
</script>
<style scoped>
</style>
配置组件路径映射:
注意这里的:/id
{
path:'/user/:id',
name:'user',
component:user
}
使用该组件
id从data里面动态获取,用v-bind绑定router-link的to属性,这里需要字符串拼接
<template>
<div id="app">
<router-view/>
<router-link to="home" tag="button" replace active-class="active">Home</router-link>
<router-link to="About" tag="button">About</router-link>
<router-link :to="'user/'+userID" tag="button">user</router-link>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
userID:"张三"
}
}
}
</script>
结果:
如果要在user组件中显示该id,
在user组件中获取id:
<template>
<div>
<h1>我是用户</h1>
{{$route.params.id}}
</div>
</template>
这里需要区分$ router 和$ route,前者是获取创建的路由实例(new Router),后者是获取活跃的路由(也就是目前显示的组件)。
注意这里的$route.params.id的id是对应前面配置路径映射path的冒号后面的id,如果冒号后面是abc那么这里也应该是abc