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 }}
url是路由斜杠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;
},
}
url是路由问号id
// 在浏览器记录中前进一步，等同于 history.forward()router.go(1)
// 后退一步记录，等同于 history.back()router.go(-1)
// 前进 3 步记录router.go(3)
重定向和嵌套路由
重定向和嵌套路由配置
这样header的children就都包含了header.vue里面的头部内容
网友评论