学习路由器vue-router

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的组件
}

跳转路由的链接

<router-link :to="{name:'contentA',params:{id:1,name:'pageA'}}">
Go to PageA
</router-link>

或者传path属性

<router-link :to="{path:/learnRouter/contentA/${id}}">
Go to PageA
</router-link>

页面跳转成功后浏览器url为显示为 /pageA/id
this.$route.params.id来获取

---

2.以query作为参数传递

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

跳转路由的组件

<router-link :to="{name:'contentB',query:{id:2}}">
Go to PageA
</router-link>

浏览器url上显示为/pageA?id=1
this.$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

<router-view name="a"></router-view>
//路由
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
             }
        ]
   }]

<router-link path="/pageA">goto pageA </router-link>
<router-link path="/pageB">goto pageB </router-link>
<router-view></router-view>

原文地址：https://segmentfault.com/a/1190000016784786