Vue Router 中文文档
动态路由匹配(相应路由参数的变化)
情景:当文章列表页跳转文章详情页时,需要传递文章id
写法一:
1、文章详情页路由配置:
{
path: "/ArticleDetail/:id",
component: ArticleDetail
}
2、文章列表页请求详情页:
this.$router.push({path:"/ArticleDetail/"+id})
或者
this.$router.push({ path: `/ArticleDetail/${id}` })
3、详情页接收列表页传来的id:
{{ $route.params.id }}
写法二:
1、文章详情页路由配置:
{
path: "/ArticleDetail",
component: ArticleDetail
}
2、文章列表页请求详情页(以下两种方式):
声明式:
编程式:
toDetail: function (id) {
this.$router.push({path:"/ArticleDetail",query:{id:id}})
},
3、详情页接收列表页传来的id:
在created中接收
export default {
name: "ArticleDetail",
data(){
return{ id:null, }
},
created(){
this.id = this.$route.query.id;
},
}
// 在浏览器记录中前进一步,等同于 history.forward()router.go(1)
// 后退一步记录,等同于 history.back()router.go(-1)
// 前进 3 步记录router.go(3)