Vue Router知识点

使用router-link来导航，通过to属性指定连接
router-link会默认被渲染成一个a标签

    <router-link to="/somepath"></router-link>
    //渲染后
    <a href="#/somepath"></a>

路由出口router-view
路由匹配到的组件将会渲染在router-view这里

    <router-view></router-view>

定义路由
每个路由应该映射一个组件，其中component可以是通过
Vue.extend()创建的组件构造器
或者，只是一个组件配置对象。

    //模块化开发必须要声明使用VueRouter
    Vue.use(VueRouter)

    const routes = [
        { path:"/somepath",component:SomeComponent }
    ]

创建router实例，然后传路由的配置。

    const router = new VueRouter({routes})

创建和挂载根实例
将router实例挂载到vue实例上，

    new Vue({
        el:"#app",
        router
    })
    //或者
    new Vue({
        router
    }).$mount('#app)

动态路由匹配：
我们经常需要把某种模式匹配到的所有路由，全部映射到同一个组件,
路径的参数使用冒号’/:参数’标记，当匹配一个路由是，参数值会被
设置到this.$route.params,可以在每个组件内使用。 你可以在路由中设置多段路径参数，都会被匹配到$route.params中

    const routes = [
        //...other routes
        { path:"/somepath/:id",component:SomeComponent }
        //..other routes too
    ]
    //获取参数，在vue实例中使用$route
    template:'<div>{{ $route.params.id }}</div>'
    methods:{
        getParam () {
            return this.$route.params.id
        }
    }

响应路由参数的变化
在vue中，当使用相同路由不同路由参数时，这个组件实例会被重复的利用，
这样更加高效，不过，这也意味着组件的生命周期钩子不会被调用。
复用组件时，想对路由参数的变化做出相应的话，可以使用watch $route对象

    watch:{
        '$route' (to,from) {
            //每当路由切换完成的时候，可以在这里进行操作
        }
    }

嵌套路由
注意：以/开头的嵌套路径会被当作根路径，所以嵌套内的路由不用加/开头
否则，你不能以嵌套的方式访问这个路由，你只能直接从根路径切换到这个路由

    const routes = [
        //....other routes
        {
            path:'/somepath',
            compoment:SomeComponent,
            children:[
                {
                //嵌套路由中的子路由不能加"/",否则
                //会被Vue解析为通过根路径进行访问!!!
                    path:'childrenpath',
                    component:ChildrenComponent
                }
            ]
        }
    ]

如果嵌套路由没有匹配，就不会渲染任何东西，我们在这里可以设置一个空的自路由
这样不至于空的情况下不知所措

    { path:'',component:NotFoundComponent }

编程式导航
除了使用router-link创建a标签泪定义导航链接，我们还可以借助router的实例方法，通过
来实现

    router.push({path:'/somepath',component:SomeComponent})

router.push(location)
想要导航到不同的Url,则使用router.push()方法。这个方法会想history栈添加一个
新的记录，所以当用户点击浏览器后退按钮时，则回到之前的url
当点击router-link时，router.push()方法毁在内部调用。
所以说点击router-link就相当于调用router.push()，
router-link 称为声明式导航
router.push() 称为编程式导航。

命名路由

有时候，通过一个名称来标识路由显得更加方便一些，特别是在连接一个路由
或是执行一些跳转的时候，你可以在创建router的时候，在routes配置中给某个
路由设置名称。

    {path:'/somepath',name:'somename',component:SomeComponent}

命名视图router-view
想同时展示多个视图，而不是嵌套展示。
可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。
此时router-view都应该命名，没有设置名字的会被默认为default视图。
一个视图渲染一个组件，这样在同一个路由下，如果有多个视图，那就需要多个组件。
确保这个时候路由配置使用components(这个时候使用components,单个视图时使用component)

    <!--没有署名的router-view为默认的router-view-->
    <router-view></router-view>
    <router-view name="somename"></router-view>

    //路由配置
    {
        path:'/somepath',
        //注意此时应用components而不是component
        components:{
            default:DefaultComponent,
            somename:SomeOtherComponent
        }
    }

路由器别名
重定向意思时，当用户访问一个路径时，会被替换到重定向的路径，而且会加载重定向路径的组件
别名的意思是，当用户访问别名时，路由会显示别名，但是还是会匹配这个路由下的组件的。只是路由不一样了。

    {
        path:'/somepath',
        component:SomeComponent,
        alias:'/aliasname'
    }
    //当我们访问/aliasname这个路由时，虽然路由器显示的是/aliasname,
    //但是内容加载的仍然是SomeComponent这个组件。

导航钩子
vue-router提供的导航钩子主要用来拦截导航，让他完成跳转或取消。
有多种方式可以在路由导航发生时执行钩子：全局的，单个路由独享的，或者组件级的。

全局钩子：
router.beforeEach
可以使用router.beforeEach注册一个全局的before钩子
当任意一个导航触发时，全局的before钩子按照创建顺序调用，钩子是异步解析执行，此时
导航在所有钩子resolve完之前一直处于等待中。
钩子方法接受三个参数：
to: 目标路由对象
from: 触发钩子的路由
next: function,一定要调用next()方法来resolve这个钩子，执行效果依赖
next()方法的调用参数。
next():进入管道中的下一个钩子，如果全部钩子执行完了，则导航的状态是confirmed.
next(false):中断当前的导航。如果浏览器的url变了，URL地址会重置到from路由对应
的地址。
next(‘/’):跳转到不同的地址。当前的导航被中断，然后重定向到另一个导航。

注：一定要调用next()方法！否则钩子不会被resolved.
同样也可以注册afterEach()钩子。它没有next()方法，不能改变导航。

某个路由独享的钩子：
可以在路由配置上直接定义beforeEnter钩子，和beforeEach()一行的参数

组件内的钩子：
可以在路由组件内直接定义路由当行钩子：
beforeRouteEnter:在渲染组件的对应路由被comfirm钱调用

beforeRoteUpdate：在当前路由改变，但是该组件被复用时调用
切换路由参数时，路由发生了变化，但是组件会被复用，这个时候要被调用

beforeRouteLeave：
//导航离开组件时对应路由时调用。

数据的获取：
当进入路由，可能需要从服务器获取数据，我们可以有两个时段来获取数据。

在导航路由完成之后获取，先完成导航，然后在接下里的组件生命周期钩子
中获取数据(created)，在获取数据期间，我们可以显示loading提示等方式。

当在导航之后获取数据这种方式时，我们会马上导航和渲染组件，然后在组件的
created钩子中获取数据。这让我们有机会在数据获取期间展示一个loading状态，
我们可以在watch中，监听路由$route,如果路由发生变化，变化到当前路由时，再次
执行获取数据的方法。

在导航完成之前获取数据：导航完成之前，在路由的enter钩子获取数据，在数据
获取成功之后再执行导航。
通过这种方式，我们在导航转入新的路由前获取数据，我们可以在接下来的组件的
beforeRouteEnter钩子中获取数据，当数据获取成功后值调用next()方法。

滚动行为
使用当前路由，当切换到新路由时，想要页面滚动到顶部，或者是保持原先的滚动位置，
就像重新加载页面那样。vue-router可以自定义路由切换时页面如何滚动。
注：这个功能只在HTML5 history模式下可用。