vue2+vuex+vue-router 快速入门（四） vue-router 介绍

vue-router

　　前端路由在 HTML5 的 History API 未出现之前，一直采用 hash 值来实现。因为 hash 值的变动，浏览器并不会向后端发送一个新的请求。而我们的 js 代码却可以通过 onhashchange 和 window.location.hash来监听及获取到变化值。从而实现前端页面的变动。
　　vue.js 已经帮我们用组件拼装出应用（页面），借助 vue-router 我们就可以根据 URL 的值，在不同地点渲染不同的页面。

let router = new Router({
    routes:[
        {
            path:"/foo",
            component:Foo,
        },
        {
            path:"/bar",
            component:Bar
        }
    ]
})

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

App.vue

<template>
    <div id="app" :class="skin">
        <router-view></router-view>
    </div>
</template>

这样，vue 会把根组件 App 渲染替换掉真实 DOM 中的 id=app 的元素。 而组件 Foo 和 Bar 被渲染替换根组件 App 中的 <router-view> 元素。当 url 为 /foo 的时候，渲染 Foo 组件，当 url 为/bar 的时候，渲染 Bar 组件。

动态路由匹配

　　我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』（dynamic segment）来达到这个效果。
　　翻译上面一段话就是：如果我们想把参数也混入路由路劲里面，而又不影响路由的跳转应该怎么办？

routes:[
        {
            path:"/user/:id",
            component:User,
        }
    ]

如上的模式，’/user/ID1938303’，’/user/ID818237271’ 都会被映射到 User 上。而 ‘ID1938303’ 会被保留到 $route.params 中。在 User 组件内部，通过 this.$route.params.id 即可访问。

嵌套路由

　　实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

/user/foo/profile                    /user/foo/posts
+