搞懂Vue-Router的概念和使用，看完这篇文章就够了

一. 前言

说到路由，大家都会第一时间想到上图生活中的路由器；可以看到路由器上有几个网线口，每个网线口连接着一台电脑；

我们可将路由器的网线口看作key值，连接的电脑看作value值，每一个key对应着一个value，这就是路由；路由就是一种对应关系；

而多个路由（route）是由路由器（router）管理的，这就是两者的关系；

生活中的路由器就是为了实现多台设备可以共同上网，那我们编程中的路由呢，其实它们都是符合以下两点：

• 路由就是一组key–valued的对应关系
• 多个路由需要经过路由器管理

上图就是前端编程路由跳转的规则，点击导航根据路径跳转到对应的组件；也是一种映射关系，多个路由的映射关系由前端路由器统一管理配置；

二. 对SPA应用的理解

编程中的路由是为了实现SPA（single page web application）应用（单页面应用）；

单页面应用就像vue和react只有一个html页面，页面和局部内容改变通过路由跳转完成；多页面应用就是多个html页面，经过点击链接跳转到对应的html页面；

对SPA（单页面应用）的理解：

• 单页面应用
• 整个应用只有一个完整的页面index.html
• 点击页面中的导航不会刷新页面，只会也页面局部更新
• 数据需要通过ajax请求获取

三. 后端路由和前端路由

前面说过关于路由的概念：

扫描二维码关注公众号，回复： 15238391 查看本文章

1. 一个路由就是一组映射关系；
2. Key为路径，value可能就是一个函数或者组件

官方是这样定义的：

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：嵌套路由映射，动态路由选择，模块化、基于组件的路由配置…

上面为什么说key路径对应的value有可能是一个函数，因为路由也 前端和后端之分；

后端路由：

• value是funtion，用于处理客户端提交的请求
• 服务器接受到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

前端路由：

• value是component，用于显示页面内容
• 当浏览器路径发生变化时，对应的组件就会显示

四. 项目中路由基本使用

路由的基本使用，其实官方介绍的很详细；这里注意一下，vue2.x版本使用路由V3.x版本，vue3.x版本使用路由V4.x版本；

如果你在最初创建项目的时候，选择一起安装vue-router的话，项目代码也就配置好了，下面我们来手动安装配置一下；

首先，在项目中安装vue-router

npm install vue-router@3.x

其次，在src文件夹下面创建一个router文件夹，并在其下创建index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/login/login'

Vue.use(Router)

export default new Router({
    
    
 routes:[
   {
    
    
      path: '/login',
      component: Login
   },
   {
    
    
      path: '/home',
      component: () => import('@/views/home/index'),
   },
 ]
})

然后，在main.js里面注册路由

import Vue from 'vue'
import App from './App'
import router from './router'

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

最后，在项目组件中添加 < router-view /> 视图

<template>
  <div class="app">
    <!-- 一级路由视图 -->
    <router-view /> 
  </div>
</template>

五. 嵌套路由

上面这个布局是我们最常见的后台管理系统，以上展示属于两层嵌套，现在看不懂没有关系，接下来我们来一点点熟悉，搞懂了上面两层嵌套路由的布局，以后就算嵌套十几层也没有问题，当然一般项目最多也就嵌套三四层而已；

下面我就用我练习的这个vue2.x的项目给大家分析一下这个嵌套路由；

一级路由

结合我上面给大家演示的路由基本使用的代码，可以看到一级路由容器此时渲染的是home组件；为什么给你截图上面的地址栏就是更好的去理解上面说的路由就是一种映射关系：

** /home (自定义的一级路由名称) => (一级路由容器)**

项目代码展示：

在项目router文件夹下index.js中

...
 routes:[
  //自定义的第一层路由
   {
    
    
      path: '/login', //路由名称
      component: Login //映射的路由组件
   },
   {
    
    
      path: '/home',
      component: () => import('@/views/home/index'),
   },
...

在项目App.vue中：

<template>
  <div id="app">
    <!--一级路由容器 ,主要渲染login组件和home组件--> 
    <router-view /> 
  </div>
</template>

二级路由

在一级路由容器里面，根据业务需求我们需要很多菜单，所以此时就需要使用二级理由，根据点击菜单对应的二级路由来映射出想要的组件；

** /home/navigationTwo (自定义的二级路由名称) => (二级路由容器)**

项目代码展示：

在项目router文件夹下index.js中

...
 routes:[
  //自定义的第一层路由
   {
    
    
      path: '/login', //路由名称
      component: Login //映射的路由组件
   },
   {
    
    
      path: '/home',
      component: () => import('@/views/home/index'),//首页组件
      //自定义的第二层路由
      children:[
        {
    
    
         //刚开始，大家一定会疑惑这个二级路由定义的path为什么是空，
         //其实，这个组件是首页组件里面二级容器一上来显示的内容组件，属于首页初始化内容
         //也就是点击登录后，显示的完整的首页内容，所以该二级路由名称不需要写
          path: '',
          //首页组件的二级容器初始化组件，也可以理解 上面首页组件+该组件内容 = 首页内容
          component:() => import('@/views/home/home'),
        },
        {
    
    
          path: 'navigationOne', //第二层定义的路由名称前不用加'/'
          component: () => import('@/views/navigationOne/index'), //映射的组件
        },
        {
    
    
          path: 'navigationTwo',
          component: () => import('@/views/navigationTwo')
        },
        ...
      ]
    }
   },
...

在views/home/index（首页组件）中：

<template>
  <div class="homeContainer">
     <el-container>
      <el-aside>
        <Logo></Logo>
        <Menus></Menus>
      </el-aside>
      <el-container>
        <el-header>
          <Header></Header>
        </el-header>
        <el-main>
          <!--二级路由组件容器-->
           <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

上面就是二级嵌套路由的写法，需要你想定义三级路由，还是和二级路由一样先在router文件中的index.js中在你想要定义三级路由的二级组件路由对象中在添加个children，childre里面来定义三级路由；

模块化路由

如果定义的路由嵌套层数过多，可以在router文件下定义个文件，在暴露出去，然后引入到index.js文件中，这样方便查找和维护，如下图：

六. 路由传参

• < router-link >标签传参

前面我写过专门的介绍，可点击vue中路由传参方式之一（router-link 进行页面按钮式路由跳转传参）查看；

• 编程式路由传参

前面我写过专门的介绍，可点击vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）查看；

七. 路由守卫

全局路由守卫

• beforeEach( (to,from,next) => {}) — 在初始化和路由切换之前调用
• afterEach((to,from) => {}) — 在初始化和路由切换之后调用

项目中可以利用beforeEach全局前置路由守卫来做权限路由访问

独享路由守卫

• beforeEnter(to, from，next) — 某个路由独享的，只有进去之前

const routes = [
  {
    
    
    path: '/home',
    component: () => import('../views/index.vue'),
    beforeEnter: (to, from，next) => {
    
    
    //符合权限的可以进去该单个路由
     ...
    },
  },
]

组件路由守卫

• beforeRouteEnter(to,from,next)
• beforeRouteUpdate(to,from,next)
• beforeRouteLeave(to,from,next)

beforeRouteEnter(to, from，next) {
    
    
    //通过路由规则，进入该组件时被调用
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
  },
  beforeRouteUpdate(to, from,next) {
    
    
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from) {
    
    
    //通过路由规则，离开该组件时被调用
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
  },

八.在vue项目中禁止浏览器前进或后退按钮

在main.js中：

window.addEventListener('popstate', function() {
    
    
  history.pushState(null, null, document.URL)
})

在router文件夹中index.js中：

export default new Router({
    
    
	 routes:[],
	 scrollBehavior: () => {
    
    
	    history.pushState(null, null, document.URL)
	  }
 })