Vue.js 2.0 学习笔记（五）路由

文章目录

Vue.js 2.0 学习笔记（五）路由
一、把axios挂载到Vue的原型上
二、前端路由的概念与原理
三、vue-router 的使用
四、导航守卫

一、把axios挂载到Vue的原型上

思想：在 Vue 的原型上挂一个共享的成员，挂载后每一个.vue 组件都可以访问该成员，可以直接使用

// main.js
import axios from 'axios'

// 全局配置 axios 的请求根路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3006'
// 把 axios 挂载到 Vue.prototype 上，供每个 .vue 组件的实例直接使用
Vue.prototype.$http = axios
// 今后，在每个 .vue 组件中要发起请求，直接调用 this.$http.xxx

export default {
  methods: {
    // 点击按钮，获取图书列表的数据
    async btnGetBooks() {
      const { data: res } = await this.$http.get('/api/getbooks')
      console.log(res)
    }
  }
}

优点：不用在每个组件中都 import axios了，且配置全局的请求根路径后，就可以只写后面的路径，不同写前面相同的路径

缺点：无法实现 API 接口的复用！！！

解决方案：路由

二、前端路由的概念与原理

2.1 路由的概念

路由（router）就是对应关系

2.2 SPA（单页面应用程序）与前端路由

SPA: 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现。
前端路由：指的是 HASH 哈希地址和组件之间的对应关系

2.3 前端路由的工作原理

① 用户点击了页面上的路由链接

② 导致了 URL 地址栏中的 Hash 值发生了变化

③ 前端路由监听了到 Hash 地址的变化

④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中

三、vue-router 的使用

3.1 vue-router 的概念

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。

vue-router 的官方文档地址：https://router.vuejs.org/zh/

3.2 vue-router 安装和配置的步骤

步骤：

① 安装 vue-router 包

npm i vue-router -S

② 创建路由模块（js 文件）

在 src 源代码目录下，新建 router/index.js 路由模块，并初始化如下的代码：

// src/router/index.js 就是当前项目的路由模块
// 1.导入 Vue 和 VueRouter 的包
import Vue from 'vue'
import VueRouter from 'vue-router'

// 2.用Vue.use()函数，把 VueRouter 安装为 Vue 项目的插件
// Vue.use() 函数的作用，就是来安装插件的
Vue.use(VueRouter)

// 3.创建路由的实例对象
const router = new VueRouter()

// 4.向外共享路由的实例对象
export default router

③ 导入并挂载路由模块

④ 声明路由链接和占位符

做完以上步骤后，index.js 和 main.js 还没有任何关联，需要在main.js 中挂载 index.js中的路由对象。

// 导入路由模块，目的：拿到路由的实例对象
// 在进行模块化导入的时候，如果给定的是文件夹，则默认导入这个文件夹下，名字叫做 index.js 的文件
import router from '@/router'

new Vue({
  render: h => h(App),
  // 在 Vue 项目中，要想把路由用起来，必须把路由实例对象，通过下面的方式进行挂载
  // router: 路由的实例对象
  // router: router 可以简写为router
  router
}).$mount('#app')；

重点：

Vue.use() 函数的作用：用来来安装插件的
创建路由模块的目的是为在main.js中挂载
在 Vue 项目中，要想把路由用起来，必须把路由实例对象，通过 router: 路由的实例对象的方式进行挂载
在进行模块化导入 import 的时候，如果给定的是文件夹，则默认导入这个文件夹下的 index.js 文件

3.3 路由的基本使用

3.3.1 基本写法

只要在项目中安装和配置了 vue-router 就可以使用 router-view ，作用：占位符,希望在哪儿展示 router-view 对应组件的内容就把 router-view 放在哪儿。使用了 router-view 占位后，还需要在路由模块(/router/index.js)声明路由的对应关系

<template>
    <div>
        <a href="#/home">首页</a>
        <a href="#/movie">电影</a>
        <a href="#/about">关于</a>
        <router-view></router-view>
    </div>
</template>

//index.js
// 导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

// 创建路由的实例对象
const router = new VueRouter({
  // routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系
  routes: [
    // 重定向的路由规则
    { path: '/', redirect: '/home' },
    // 路由规则
    { path: '/home', component: Home }, //不要写#
    { path: '/movie', component: Movie},
    { path: '/about', component: About}
  ]
})

要点：

创建路由的实例中，routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系
path 中只写路径中 # 后面的内容，不要添加 # 号

问题：a 链接的路径是手写的，且路径开头要写#号，麻烦且不太规范

3.3.2 利用 router-link 代替 a 链接

当安装和配置了 vue-router 后，就可以使用 router-link 来替代普通的 a 链接。

<template>
    <div>
        <router-link to="/home">首页</router-link>
        <router-link to="/movie">电影</router-link>
        <router-link to="/about">关于</router-link>
        <router-view></router-view>
    </div>
</template>

<router-link>除了有 to 属性，用来指定跳转的页面之外，还有一些些其他的属性：

tag：指定<router-link> 之后渲染成什么组件，如：<router-link to="/home" tag="li"> 就会被渲染成为一个 <li> 组件，而不是 <a>
replace：不会留下历史记录，后退键不能返回上一个页面中
active-class：当<router-link>对应的路由匹配成功使，会自动给当前的元素设置一个 router-link-active 的 class，设置 active-class 可以修改默认的名称

3.3.3 H5 中的 history

路径默认是 hash 模式，改变路径的方式有两种：

URL 的 hash
HTML 的 history

若希望使用H5 的 history 模式，需要’/router/index.js’ 中进行配置

const router = new VueRouter({
    routes: [..],
    mode: 'history'
})

3.4 嵌套路由

嵌套路由：通过路由实现组件的嵌套

<!--About.vue-->
<template>
  <div class="about-container">
    <h3>About 组件</h3>

    <!-- 子级路由链接 -->
    <router-link to="/about/tab1">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>

    <!-- 子级路由占位符 -->
    <router-view></router-view>
  </div>
</template>

3.4.1 通过 children 属性声明子路由规则

在 src/router/index.js 路由模块中，导入需要的组件，并使用 children 属性声明子路由规则：

// src/router/index.js
import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'

// 创建路由的实例对象
const router = new VueRouter({
  routes: [
    ... // 其他页面的路由规则
    { // about 页面的路由规则（父级路由规则）
      path: '/about',
      component: About,
      children: [ // 子路由规则
        // 访问/about/tab1时，展示 Tab1 组件
        { path: 'tab1', component: Tab1 }, 
        { path: 'tab2', component: Tab2 }
      ]
    }
  ]
})

注意：

在子路由规则的 path 中，前面是没有斜线的
子路由规则 children 是一个数组

3.4.2 默认子路由

如何在进入父组件时就展示一个子组件？

方法一：利用重定向

// 创建路由的实例对象
const router = new VueRouter({
  routes: [
    ... // 其他页面的路由规则
    { // about 页面的路由规则（父级路由规则）
      path: '/about',
      component: About,
      redirect: 'about/tab1',
      children: [ // 子路由规则
        // 访问/about/tab1时，展示 Tab1 组件
        { path: 'tab1', component: Tab1 }, 
        { path: 'tab2', component: Tab2 }
      ]
    }
  ]
})

方法二：默认子路由

如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做 “默认子路由”

// index.js
const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: About,
      children: [
        // 默认子路由：如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做“默认子路由”
        { path: '', component: Tab1 },
        { path: 'tab2', component: Tab2 }
      ]
    }
  ]
})

<!--About.vue-->
<template>
  <div class="about-container">
    <h3>About 组件</h3>

    <!-- 子级路由链接 -->
    <router-link to="/about">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>

    <!-- 子级路由占位符 -->
    <router-view></router-view>
  </div>
</template>

3.5 动态路由匹配

假如有如下路由链接，1、2、3 可看成id：

如果这样定义路由规则：

缺点：路由规则的复用性极差

3.5.1 动态路由的概念

动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。在 vue-router中使用英文的冒号（:）来定义路由的参数项。

示例代码如下：

// 路由中的动态参数以 : 进行声明，冒号后面是动态参数的名称
// 将上面的3个路由规则合并成了一个
{ path: '/movie/:mid', component: Movie}

具体实例：

<template>
    <div>
        <router-link to="/home">首页</router-link>
        <router-link to="/movie/1">洛基</router-link>
    	<router-link to="/movie/2">雷神</router-link>
    	<router-link to="/movie/3">复联</router-link>
        <router-link to="/about">关于</router-link>
        <router-view></router-view>
    </div>
</template>

// index.js
const router = new VueRouter({
  // routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系
  routes: [
	...... // 其他页面的路由规则
    // 需求：在 Movie 组件中，希望根据 id 的值，展示对应电影的详情信息
    { path: '/movie/:mid', component: Movie }
  ]
})

在组件（Movie.vue）中项访问 mid 参数值，如何访问?

方法一：利用$route.params.mid

<template>
  <div class="movie-container">
    <!-- this.$route 是路由的“参数对象” -->
    <!-- this.$router 是路由的“导航对象” -->
    <!-- this可以被省略 -->
    <!-- <h3>Movie 组件 --- {{ this.$route.params.mid }}</h3> -->
    <h3>Movie 组件 --- {{ $route.params.mid }}</h3>
  </div>
</template>

但会发现要拿到参数比较复杂，需要在$route 对象下层层找要的参数，如何简化拿到参数的过程呢？

方法二：利用 props 传参

// index.js
const router = new VueRouter({
  // routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系
  routes: [
	...... // 其他页面的路由规则
    // 需求：在 Movie 组件中，希望根据 id 的值，展示对应电影的详情信息
    // 可以为路由规则开启 props 传参，从而在组件中方便的拿到动态参数的值
    { path: '/movie/:mid', component: Movie, props: true }
  ]
})

<!-- Movie.vue -->
<template>
  <div class="movie-container">
    <h3>Movie 组件 --- {{ mid }}</h3>
  </div>
</template>

<script>
export default {
  name: 'Movie',
  // 接收 props 数据
  props: ['mid']
}
</script>

3.6 query 和 fullPath

要点：

在 hash 地址中，/ 后面的参数项，叫做“路径参数”，如：’/movie/1’ 中的1，在路由“参数对象”($route) 中，需要使用 this.$route.params 来访问路径参数
在 hash 地址中，? 后面的参数项，叫做“查询参数” ，如：’/movie/2?name=zs&age=20’ 中的 name 和 age 。在路由“参数对象”中，需要使用 this.$route.query 来访问查询参数
在 this.$route 中，path 只是路径部分；fullPath 是完整的地址。如：/movie/2?name=zs&age=20 是 fullPath 的值；/movie/2 是 path 的值

3.7 vue-router 参数传递的方式

主要有两种方式：params 和 query

params 的类型：
- 配置路由的格式：/router/:id
- 传递的方式：在 path 后跟上对应的值
- 传递后形成的路径：/router/123
query 的类型:
- 配置路由的格式：/router，也就是普通配置
- 传递的方式：对象中使用 query 的key作为传递方式
- 传递后形成的路径：/router?id=123

要点：

query主要是传对象
有大量数据时，一般是用query

3.8 路由的懒加载

3.8.1 路由懒加载的含义

官方给的解释：当打包构建应用时，JS 包会变得非常大，如果一次性从服务器请求下这个页面，需要花费一定时间，甚至用户的电脑上还会出现短暂的空白。如果我们能把不同路由对应的组件分隔成不同的代码块，然后当路由被访问时才加载对应的组件，这样就更高效。简单的说就是：用到时再加载，这就是路由懒加载

路由懒加载的工作：

路由懒加载的主要作用就是将路由对应的组件打包成一个个的 js 代码块
只有在这个路由被访问到的时候，才加载对应的组件

3.8.2 路由懒加载的效果

3.8.3 路由懒加载的方式

方式一（不推荐）：结合 Vue 异步组件和 Webpack 的代码分析

const Home = resolve => {
    require.ensure(['../components/Home.vue'], () => {
        resolve(require('../components/Home.vue'))
    })
}

方法二：AMD写法

const About = resolve => require(['../components/About.vue'], resolve);

方法三（推荐）：ES6才能使用

const Home = () => import('../components/Home.vue');

3.9 编程式导航跳转

3.9.1 声明式导航 & 编程式导航

声明式导航：浏览器中，点击链接导致页面上组件的切换的方式叫声明式导航

如：普通网页中点击 <a> 链接、vue 项目中点击 <router-link> 都属于声明式导航
编程式导航：在浏览器中，调用 API 方法实现导航的方式，叫做编程式导航。

如：普通网页中调用 location.href 跳转到新页面的方式，属于编程式导航

3.9.2 vue-router 中的编程式导航API

vue-router 提供了许多编程式导航的 API，其中最常用的导航 API 分别是：

① this.$router.push(‘hash 地址’)

跳转到指定 hash 地址，并增加一条历史记录

② this.$router.replace(‘hash 地址’)

跳转到指定的 hash 地址，并替换掉当前的历史记录

③ this.$router.go(数值 n)

实现导航历史前进（n为正数）、后退（n为负数），如果后退的层数超过上限，则原地不动

router.go 的简化用法

在实际开发中，一般只会前进和后退一层页面。因此 vue-router 提供了如下两个便捷方法：

① $router.back()

在历史记录中，后退到上一个页面

② $router.forward()

在历史记录中，前进到下一个页面

四、导航守卫

4.1 导航守卫的概念

导航守卫可以控制路由的访问权限，监听监听路由的进入和离开，防止一些意外情况的发生。示意图如下：

4.2 全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制

// /router/index.js
// 创建路由实例对象
const router = new VueRouter({...})

// 调用路由实例对象的 beforeEach 方法，即可声明“全局前置守卫”
// 每次发生路由导航跳转的时候，都会触发 fn 这个回调函数  
router.beforeEach(fn);

1. 全局前置守卫的回调函数中的3个形参

to：表示将要访问的路由的信息对象
from：表示将要离开的路由的信息对象
next：next 是一个函数，表示放行的意思，如果没有next（），导航会失效

2. next 函数的 3 种调用方法

参考示意图分析 next 函数的 3 种调用方法最终导致的结果：

当前用户拥有后台主页的访问权限，直接放行：next()
当前用户没有后台主页的访问权限，强制其跳转到登录页面：next(’/login’)
当前用户没有后台主页的访问权限，不允许跳转到后台主页，强制停留在当前页面：next(false)

3. 具体例子

// /router/index.js
// 只要发生了路由的跳转，必然会触发 beforeEach 指定的 function 回调函数
router.beforeEach(function(to, from, next) {
  if (to.path === '/main') {
    // 要访问后台主页，需要判断是否有 token
    const token = localStorage.getItem('token');
    if (token) {
      next(); // 访问的式后台的主页，且有token的值
    } else {
      // 没有登录，强制跳转到登录页
      next('/login'); // 访问的式后台的主页，但是没有token的值
    }
  } else { // 访问的不是后台主页，直接放行
    next();
  }
})

分析实现的步骤：

要拿到用户将要访问的 hash 地址；
判断 hash 地址是否等于 ‘/main’：
1. 如果等于’/main’，证明需要登录之后，才能访问成功
2. 如果不等于’/main’，则不需要登录，直接放行 next()
如果访问的地址是 ‘/main’。则需要读取 localStorage 中的 token 值
1. 如果有 token，则放行
2. 如果没有 token，则强制跳转到 ‘/login ‘登录页