vue-router基本配置（传参、嵌套、重定向）

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里面的头部内容