vue全家桶（2.5）
2024-09-07 18:39:41
3.8.动态路由匹配和路由组件传参
3.8.1.动态路由匹配
动态路由意味着不固定，具有某种模式，我们希望通过某种匹配方式，把这种不固定的路由形势映射到同一个组件，例如：一个User组件，不同的ID表示不同的用户，即/user/1、/user/2、/user/3，这些不同用户所对应的路由，我们都希望用一个User组件来渲染。vue-router中提供了动态路径参数来实现这种需求，动态路径参数写法:
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
这里的id类似于一个变量，id可以是1、2、3等具体的值
<template>
<div class="page">
<router-link :to="'/user/'+item.id" v-for="(item, index) in userList" :key="index">{{item.username}}</router-link>
</div>
</template>
<script type="text/javascript">
let userData = [
{
id: '1',
username: 'nodeing1',
level: 'vip1'
},
{
id: '2',
username: 'nodeing2',
level: 'vip1'
},
{
id: '3',
username: 'nodeing3',
level: 'vip2'
},
{
id: '4',
username: 'nodeing4',
level: 'vip3'
}]
export default {
data () {
return {
userList: userData
}
},
components: {
}
}
</script>
<style scoped>
a{
display: inline-block;
padding: 20px 60px;
text-decoration: none;
}
</style>
路由配置：
routes: [
{
path: '/user/:id?',
component: User
}
]
如何监听/响应动态参数的变化？
方式1: 使用 beforeRouteUpdate 钩子函数
<template>
<div class="page">
<router-link :to="'/user/'+item.id" v-for="(item, index) in userList" :key="index">{{item.username}}</router-link>
<hr>
<h3>用户名: {{userInfo.username}}</h3>
<h3>会员级别: {{userInfo.level}}</h3>
<h3>id: {{userInfo.id}}</h3>
</div>
</template>
<script type="text/javascript">
let userData = [
{
id: '1',
username: 'nodeing1',
level: 'vip1'
},
{
id: '2',
username: 'nodeing2',
level: 'vip1'
},
{
id: '3',
username: 'nodeing3',
level: 'vip2'
},
{
id: '4',
username: 'nodeing4',
level: 'vip3'
}]
export default {
data () {
return {
userList: userData,
userInfo: {}
}
},
components: {
},
beforeRouteUpdate (to, from, next) {
this.userInfo = this.userList.filter((item) => to.params.id === item.id)[0]
}
}
</script>
<style scoped>
a{
display: inline-block;
padding: 20px 60px;
text-decoration: none;
}
</style>
方式2: 在组件中对 $route 进行 watch（监听）
watch: {
$route () {
console.log(this.$route)
}
}
路由信息对象$route
path 对应当前路由的路径
params 保护动态路由参数
query url查询参数
hash 当前路由的hash值
fullPath 完整的url路径，包含查询参数和hash
matched 包含当前路由的所有嵌套路径片段的路由记录
name 当前路由的名称
3.8.2.路由组件传参
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性,我们需要做的是通过传参将组件与路由解耦，使得组件的使用更加灵活，这里需要使用到props
路由配置里面我们需要改成这样
routes: [
{
path: '/user/:id?',
component: User,
props: true
}
]
在组件中使用props的值
<template>
<div class="page">
<router-link :to="'/user/'+item.id" v-for="(item, index) in userList" :key="index">{{item.username}}</router-link>
<hr>
<button @click="fn">显示信息</button>
<h3>用户名: {{userInfo.username}}</h3>
<h3>会员级别: {{userInfo.level}}</h3>
<h3>id: {{userInfo.id}}</h3>
</div>
</template>
<script type="text/javascript">
let userData = [
{
id: '1',
username: 'nodeing1',
level: 'vip1'
},
{
id: '2',
username: 'nodeing2',
level: 'vip1'
},
{
id: '3',
username: 'nodeing3',
level: 'vip2'
},
{
id: '4',
username: 'nodeing4',
level: 'vip3'
}]
export default {
data () {
return {
userList: userData,
userInfo: {}
}
},
components: {
},
props: ['id'],
methods: {
fn () {
let id = this.id
this.userInfo = this.userList.filter((item) => id === item.id)[0]
console.log(this.userInfo)
}
}
}
</script>
<style scoped>
a{
display: inline-block;
padding: 20px 60px;
text-decoration: none;
}
</style>
螺钉课堂视频课程地址：http://edu.nodeing.com
最新文章
- mybatis generator.xml 配置 自动生成model,dao,mapping
- Silicon Labs
- Atitit.mvc的趋势与未来attilax总结
- swift 字符转为类，代码创建控件
- django中时区设置
- struts2 集成 easyui
- spark 1.3.0下的问题
- JS手动创建标签
- JavaScript 轮播图
- Mac IDEA插件——protobuf 插件
- wait与sellp方法区别
- 微信小程序的Web API接口设计及常见接口实现
- awk解决实际问题例子
- unittest中的测试固件
- CentOS磁盘用完的解决办法,以及Tomcat的server.xml里无引用,但是项目仍启动的问题
- Handler实现线程间的通信2
- jquery引入
- Java多态面试题案例几解题思路
- Element-ui el-cascader不触发prop?
- android中共享全局数据的方法