谈一谈对vue-router的简单理解

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

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

上面是vue-router官方的介绍，接下来我总结一下，本身平时用的vue-router的相关知识，适合入门级别的小白白们，高手请绕（饶）过

---

在使用vue-router以前，咱们首先要把他整合到vue脚手架中，

（注意：本文的讲解基础是已经默认你安装好了vue-cli那一套东西）

vue-router 安装 npm install vue-router --save

在 src/router/index.js文件下写入如下代码

import Vue from 'vue'
import VueRouter from 'vue-router'

//在vue中注册VueRouter
Vue.use(VueRouter);

//导入路由映射的组件

//普通导入方式
import  comA  from '@components/comA'

//须要懒加载的导入方式（所谓懒加载就是说，一开始不会加载全部的资源致使等待时间太长，而是当你切换导航的时候，相关组件里面的资源会陆续加载）
const comB = resolve=>require(['@components/comB'],resolve);



//而后写出路由映射关系

const routes = [
    {
      path:'/',
      name:'home',
      component:home,
    },
    {
      path:'/about',
      name:'about',
      component:about,
      children:[
        {
            path:'aboutA' //其实至关于 path:'/about/aboutA'
        },{
            path:'aboutB',
        }
      ]
    }
]

复制代码

这就是比较简单和比较全的结构了，除去（参数和钩子，后面讲）。 写完映射关系，而后建立router实例，而且吧映射关系传进去

const router = new VueRouter({
        routes
    })
    
    //须要注意的是，全局路由钩子就是要写在router实例上的，以下
    
    router.beforeEach((to, from, next)=>{
        ...
        next();
    })
复制代码

接下来，咱们来看看vue-router的模式

vue-router默认使用的是hash模式，就是在路由跳转的时候，会有不少 #，看起来不太美观，所以咱们可使用 history模式 ，这种模式充分利用了 history.pushStateAPI来完成URL跳转而无需从新加载页面，从而提升了用户体验。可是，当你直接访问 www.root.com/home/page1的时候，浏览器就会真的去请求该地址，若是后端没有相关的配置，那么就会返回404，就很尴尬了，因此必定要和后端配合好。

模式基本的样子就是下面的样子

const router = new VueRouter({
        mode:"history",
        routes
    })
复制代码

路由传参

通常路由有两种传参方式，分为 params 和 query，先看看params吧,就用官网的例子吧

const User = {
  template: '<div>{{$route.params.id}}</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

复制代码

在组件内使用$route会使 组件与之高度耦合，从而组件只能在特定的URL上使用，他的灵活性受到了限制，所以可使用props使他们解耦，

const User = {
    props:['id'],
    template:`<div>{{id}}</div>`
}

const router = new VueRouter({
    routes:[
        {
            path:'/user/:id',
            component:User,
            props:true
        },
        
        //对于包含命名视图的路由，你必须分别为每个命名路由添加 props 选项，以下
        {
            path:'/user/:id',
            components:{default:User,sidebar:SideBar},
            props:{default:true,sidebar:false}
        }
    ]
})

复制代码

这样一来就极大的增长了组件的灵活性，更加易于重用和测试

params 和 query

query是这样用的

//传参
    this.$router.push({
        name:'home',
        query:{
            id:id
        }
    })
    
    //接受参数
    
    this.route.query.id
    
复制代码

params和query十分类似，

//传参
    this.$router.push({
        name:'home',
        params:{
            id:id
        }
    })
    
    //接受参数
    
    this.route.params.id
    
复制代码

这里有一点是须要注意的，那就是使用 params的时候，是不可使用path的，由于params自己就是path动态路径的构成元素，这样会发生矛盾。

为了保持一致性，query 和 params传参的时候，都尽可能 使用nama来进行区分。

---

参数的位置 通常状况下 this.$router.push 和 router-link里面的to的参数类型是如出一辙的。以下

<router-link to:"/home"></router-link>
    //至关于
    
    this.$router.push("/home");
    
    {
        name:"home",
        path:'/home/:id',
        componet:Home
    }
    
    <router-link to:"{name:"home",params:{id:"lala"}}"
    //至关于
    this.$router.push({
        name:"home",
        params:{
            id:"lala"
        }
        
    })

复制代码

以上就是 to 和this.$router.push参数一直的说明，接下来 咱们就 系统的看一下，路由钩子;

路由钩子

全局路由钩子

beforeEach and afterEach

const router = new VueRouter({
        ...
    })
    //须要注意的是，全局路由钩子，是路由实例上的，也就是上面的那个 router上的，不要弄混哦
    
    router.beforeEach((to, from, next)=>{
        // to 将要到达的路由对象
        // from 目标路由对象
        // next()进行下一步
        // next(false) 中断当前的跳转，通常用于 提醒用户是否确认进入某页面，用户取消
        //next('/') 或者 next({name:"home",params:{}})
    })    
    
    router.afterEach((to,from)=>{
        ...
        //导航已经结束，所以没有next
    })
    

复制代码

路由映射关系上的 钩子

beforeEnter and afterEnter

const router = new VueRouter({
      routes:[
        {   name:home,
            path:'/home',
            component:Home,
            beforeEnter:(to,from, next) =>{
                ...
            },
            afterEnter:(to, from)=>{
                ...
            }
        }
      ]
  })

复制代码

基本上和全局路由钩子的用法同样

组件内的钩子

beforeRouterEnter and beforeRouterUpdate(2.2 add) and beforeRouterLeave

export default{
        data(){
            return {
                ...
            }
        },
        beforeRouterEnter (to, from, next){
            //因为在使用这以前，导航还未确认，实例尚未被建立，因此这里面是不能调用this的
        },
        beforeRouterUpdate(to,from,next){
            //次函数的触发规则是，在相似 /home/:id 这样的动态路由中，因为id的变化，可是组件仍然不变的状况下，即可以使用
            //此时实例已经建立完成，所以，this能够登上舞台
            
        },
        beforeRouterLeave(to,from,next){
            //导航离开组件对应路由会触发这个函数
            //能够访问this
        }
    }
        


复制代码

这就是我对vue路由的，一些理解和总结，但愿可以帮助刚刚入门的小伙伴们，一块儿加油，坚持写文章，将来一片光明