vue-router:vue官方路由管理器。

功能:

嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式，在 IE9 中自动降级自定义的滚动条行为

安装及创建router对象

安装 npm i vue-router

1.创建单条路由

let index = {path:/index,name:'index',component：映射index的组件}

2.将多条路由合并为一组

let routes = [    index，    页面2，    页面3]

3创建路由对象

const router = new VueRouter({routes})

4在根实例上引用

new Vue({    router }).$mount(root)

使用router及传参

1、以params作为参数传递创建路由```const pageA = {    path:'/pageA/:id', //id是动态传递的参数    name:'contentA', //与router-link中to属性的name对应    component:pageA //pageA的组件    }```跳转路由的链接```
    
       Go to PageA
    ```或者传path属性```
    
         Go to PageA
    ```页面跳转成功后浏览器url为显示为 /pageA/idthis.$route.params.id来获取

---

2.以query作为参数传递

const pageA = {        path:'/pageA, //以query作为参数传不需要在path后面加动态属性        name:'contentA', //与router-link中to属性的name对应        component:pageA //pageA的组件        }

跳转路由的组件```
    
         Go to PageA
    ```浏览器url上显示为/pageA?id=1this.$route.query.id获取

在任何组件中都可以通过this.$router 获得路由对象,this.$route访问的当前路由

---

导航守卫

全局导航守卫,页面每一次跳转都可以监听，也可以放到组件中单独使用

router.beforeRouteUpdate (to, from, next) {    // to 来自哪里    // from 前往哪里    //next() 来resolve这个钩子的方法,如果不调用就不会完成跳转    //next('/other') 跳到另外一个页面    //next(false) 终止跳转   }

视图

router-link跳转的组件需要加上视图router-view才能显示，当一个页面有多个视图时用name来区分

视图命名,路由里的component里的name为键名对应router-view name=a

    //路由const pageA = {    path:'/pageA',    components:{        a:pageA.vue    }//这条路由的意思是跳转到/pageA时显示name为a的视图,name=a的视图对应的组件也就是pageA.vue

嵌套路由

例如需要一个tab导航栏，单击菜单时切换组件，但是导航菜单不变。

const route = [    {        path:'/index',        name:'index',        //这里定义子路由        children:[            {                path:'/index/pageA',                name:'pageA',                component:pageA             },             {                path:'/index/pageB',                name:'pageB',                component:pageB             }        ]   }]

    
     goto pageA 
    
    
     goto pageB