vue-router动态路由详解
平时做项目时遇到的点击列表页,显示详情页面,此时就需要我们传递列表唯一的标识,然后显示对应的内容。通常做法是以“参数=值”的形式传递参数,而动态路由将参数融入到路由的路径定义之内成为路径的一部分。在参数名称之前加“:”,然后将参数写在路由的path内。下面是给详情页detail传递唯一标识id,从而调取详细的内容。routes: [{path: '/',
·
平时做项目时遇到的点击列表页,显示详情页面,此时就需要我们传递列表唯一的标识,然后显示对应的内容。
通常做法是以“参数=值”的形式传递参数,而动态路由将参数融入到路由的路径定义之内成为路径的一部分。
在参数名称之前加“:”,然后将参数写在路由的path内。
下面是给详情页detail传递唯一标识id,从而调取详细的内容。
routes: [
{
path: '/',
name: 'Home',
component: Home,
children: [
{
path: '/detail/:id',
name: 'Detail',
component: Detail
},
]
}]
在<router-link>中只需要在to属性中加入params属性来指定具体的参数值:
<router-link tag="div" class="book" v-for="book in books" :to="{name:'Detail',params: {id: book.id}}" :key="book.id">
<div class="cover">
<img :src="book.img_url"/>
</div>
<div class="title">{{book.title}}</div>
<div class="authors">{{book.authors | join}}</div>
</router-link>
如果要同时传递多个参数,只需要在params中对应声明参数值即可。
那么问题来了?在组件Detail中怎么获取这个唯一标识id呢?可以通过$route.params属性来获取需要的参数值。
具体Detail.vue
<template>
<div class="detail">
<p @click="back">返回</p>
<p>{{$route.name}}</p>
<p>{{$route.params.id}}</p>
</div>
</template>
<script type="text/ecmascript-6">
export default {
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
console.log(to);
console.log(from);
}
},
created () {
console.log(this.$route.params.id);
}
}
</script>
<style lang="less" rel="stylesheet/less" type="text/less">
</style>
从detail/1导航到detail/2,原来的组件实例会被复用。因为两个路由都渲染同一组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用,即页面第二次加载时钩子函数将失效。那么,当复用组件时,想对路由参数做出响应的话,需要在watch对象内添加对$route对象变化的跟踪函数:
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
console.log(to);
console.log(from);
}
}
例如detail/1导航到detail/2时,to与from的值:
detail/1浏览器显示:
detail/2浏览器显示:
即from detail/1 to detail/2
同时vue-router使用path to regexp作为路由路径引擎,给参数添加匹配模式。
下面是一个只传递数字的正则,正则需要放在括号中。
{
path: '/detail/:id(\\d+)',
name: 'Detail',
component: Detail
}
vue-router除了使用$route.params获取参数值,还可以使用$route.query(路径渲染为detail?id=1,需要删除路由配置中路径的参数,同时更改<router-link>中的params为query)和$route.meta(常量参数,直接在路由配置中定义meta的值)获取。
本文参考 技术胖博客 vue-router官网
更多推荐
已为社区贡献4条内容
所有评论(0)