Vue学习笔记（四）- Vue Router

4 Vue Router

4.1 认识路由

• 说起路由你想起了什么?

  • 路由是一个网络工程里面的术语。
  • 路由( routing )就是通过互联的网络把信息从源地址传输到目的地址的活动. –维基百科额

• 啥玩意?没听懂

  • 在生活中,我们有没有听说过路由的概念呢?当然了,路由器嘛.口路由器是做什么的?你有想过吗?

  • 路由器提供了两种机制:路由和转送

    • 路由是决定数据包从来源到目的地的路径
    • 转送将输入端的数据转移到合适的输出端.

  • 路由中有一个非常重要的概念叫路由表.

    • 路由表本质上就是一个映射表,决定了数据包的指向

后端路由阶段

• 早期的网站开发整个HTML是由服务器进行渲染的

  • 服务器直接生产渲染好对应的HTML页面，返回给客户端进行展示

• 但是，一个网站，这么多页面服务器如何处理呢?

  • 一个页面有自己对应的网址，也就是URL
  • URL会发送到服务器，服务器会通过正则对该URL进行匹配，并且最后交给一个controller进行处理
  • controller进行各种处理， 最终生成HTML或者数据， 返回给前端
  • 这就完成了一个IO操作

• 上面的这种操作，就是后端路由

  • 当我们页面中需要请求不同的路径内容时，交给服务器来进行处理，服务器渲染好整个页面，并且将页面返回给客户端
  • 这种情况下渲染好页面， 不需要单独加载任何的js和css, 可以直接交给浏览器展示，这样也有利于SEO的优化

• 后端路由的缺点

  • 这个页面的编写都是由后端人员来编写维护的
  • 另一种情况是前端开发人员想要开发页面，需要学习一门后端语言
  • 通常情况下HTML代码和后端逻辑代码混在一起，非常混乱

前端路由阶段

• 随着Ajax的出现,有了前后端分离的开发模式.
• 后端只提供API来返回数据,前端通过Ajax获取数据,并且可以通过JavaScript将数据渲染到页面中.
• 这样做最大的优点就是前后端责任的清晰,后端专注于数据上,前端专注于交互和可视化上口并且当移动端(iOS/Android)出现后,后端不需要进行任何处理,依然使用之前的一套API即可.
• 目前很多的网站依然采用这种模式开发.

单页面富应用阶段

• 其实SPA应用最主要的特点就是在前后端分离的基础上加了一层前端路由
• 也就是前端来维护一套路由规则
• 前端路由的核心是什么呢？改变URL，但是页面不进行整体的刷新

4.2 认识vue-router

• 目前前端流行的三大框架，都有自己的路由实现： Angular的ngRouter, React的ReactRouter, Vue的vue-router

• 当然，我们的重点是vue-router

  • vue-router是vue.js的官方路由插件，它和vue.js是深度集成的，适合用于构建单页面应用
  • 我们可以访问其官方网站对齐进行学习

• vue-router是基于路由和组件的

  • 路由用于设定访问路径，将路径和组件映射起来
  • 在vue-router的单页面应用中，页面的路径的改变就是组件的切换

4.3 安装vue-router

安装和使用vue-router主要有以下步骤:

因为我们已经学习了webpack,后续开发中我们主要是通过工程化的方式进行开发的.所以在后续,我们直接使用npm来安装路由即可.

---

• 步骤一:安装vue-router

  npm install vue-router --save

• 步骤二:在模块化工程中使用它(因为是一个插件,所以可以通过Vue.use)来安装路由功能

  • 第一步:导入路由对象,并且调用Vue.use(VueRouter)
  • 第二步:创建路由实例,并且传入路由映射配置
  • 第三步:在Vue实例中挂载创建的路由实例

router/index.js

// 配置路由相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'

// 1. 通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

// 2. 创建VueRouter对象
const routes = [

]
const router = new VueRouter({
  // 配置路由和组件之间的映射关系
  routes
})

// 3.将router对象传入到Vue实例
export default router

main.js

import router from './router'
。。。

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4.4 使用vue-router的步骤

1. 创建路由组件

   home.vue

   <template>
     <div class="home">
       <h2>我是首页</h2>
       <p>我是首页内容，嘿嘿嘿</p>
     </div>
   </template>
   <script>
   export default {
     name: "home"
   }
   </script>

   about.vue

   <template>
     <div class="about">
       <h2>我是关于</h2>
       <p>我是关于内容，哈哈哈</p>
     </div>
   </template>
   
   <script>
   export default {
     name: "about"
   }
   </script>

2. 配置路由映射：组件和路径映射关系

   import Home from '../components/Home'
   import About from '../components/About'
   
   Vue.use(VueRouter)
   
   const routes = [
     {
       path: '/home',
       component: Home
     },
     {
       path: '/about',
       component: About
     }
   ]

3. 使用路由：通过和

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

• router-link：该标签是一个vue-router中已经内置的组件，它会被渲染成一个标签
• router-view： 该标签会根据当前的路径，动态渲染出不同的组件

在路由切换时，切换的是<router-view>挂载的组件，其他内容不会发生改变

将默认的hash模式改为history模式

我们前面说过改变路径的方式有两种:

• URL的hash
• HTML5的history
• 默认情况下，路径改变使用的是URL的hash

如果希望使用HTML的history模式，在vue-router的配置中加入如下配置即可：

// router/index.js
const router = new VueRouter({
  // 配置路由和组件之间的映射关系
  routes,
  mode: 'history'  // 指定使用history模式
})

router-link的补充

• 在前面的<router-link>中，我们只用了一个属性：to, 用于跳转的路径
• <router-link>还有一些其他属性:
  • tag: tag可以指定<router-link>之后渲染成什么组件，比如上面的代码会被渲染成一个<li>，而不是<a>
  • replace: replace不会留下history记录， 所以指定replace的情况下，后退键不能反悔到上一个页面中
  • active-class： 当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称
    • 在进行高亮显示的导航菜单或者底部tabbar时，会使用到该类
    • 但是通常不会修改类的属性，会直接使用默认的router-link-active即可

4.5 动态路由

在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：

• /user/aaaa 或 /user/bbbb
• 除了有前面的/user之外，后面还跟上了用户的ID
• 这种path和component的匹配关系，我们称之为动态路由（也是路由传递数据的一种方式）

router/index.js

{
  path: '/user/:userId',
  component: User
}

app.vue

<router-link :to="/user/ + userId" tag="button">用户</router-link>

user.vue

<template>
    <div>
      <h2>我是用户界面</h2>
      <p>我是用户的相关信息，嘿嘿嘿</p>
      <p>userId: {{userId}}</p>
    </div>
</template>

<script>
export default {
  name: 'User',
  computed: {
    userId () {
      return this.$route.params.userId
    }
  }
}
</script>

显示效果：

4.6 vue-router打包文件及路由懒加载

vue-router打包文件解析

使用npm run build命令可以使文件打包，打包完成后会在当前目录下生成一个dist目录

在dist目录下有一个js目录，内容如下：

appXXX: 当前应用程序开发的所有代码（业务代码）
manifestXXX: 为了打包的代码做底层支撑
vendorXXX： 第三方提供的包，比如vue/vue-router/axios

路由懒加载

官方解释：

• 当打包构建应用时，JavaScript包会变得非常大，影响页面加载
• 如果我们能把不同的路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了

官方在说什么呢：

• 首先我们知道路由中通常会定义很多不同的页面
• 这个页面最后被打包在哪里呢？一般情况下是放在一个js文件中
• 但是，页面这么多，放在一个js文件中，必然会造成这个页面非常的哒
• 如果我们一次性从服务器请求下来这个页面，可能需要花费一定的时间，甚至用户的电脑上海出现了短暂的空白情况
• 如何避免这种情况呢？使用路由懒加载就可以了

路由懒加载做了什么？

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

路由懒加载的效果

在使用懒加载之前，引用后直接使用：

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/user/:userId',
    component: User
  }
]

打包出来的文件：

采用懒加载方式编写：

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: () => import('../components/Home')
  },
  {
    path: '/about',
    component: () => import('../components/About')
  },
  {
    path: '/user/:userId',
    component: () => import('../components/User')
  }
]

打包出来的文件：

懒加载的几种方式

方式一：结合Vue的异步组件和Webpack的代码分析：

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

（代码冗长繁琐不推荐）

方式二： AMD写法

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

方式三：在ES6中，我们可以有更加简单的写法来组织Vue异步组件和WebPack的代码分割

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

4.7 路由嵌套

嵌套路由是一个很常见的功能

• 比如在home中，我们希望通过/home/news和/home/message访问一些内容
• 一个路径映射一个组件，访问这两个路径也会分别渲染两个组件

实现嵌套路由的两个步骤

• 创建对应的子组件，并且在路由映射中配置对应的子路由

  {
    path: '/home',
    component: () => import('../components/Home'),
    children: [
      {
        path: 'news',
        component: () => import('../components/HomeNews')
      },
      {
        path: 'message',
        component: () => import('../components/HomeMessage')
      }
    ]
  }

• 在组件内部使用<router-view>标签

<template>
  <div class="home">
    <h2>我是首页</h2>
    <p>我是首页内容，嘿嘿嘿</p>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <router-view></router-view>
  </div>
</template>

4.8 vue-router路由的参数传递

传递参数的方式

传递参数主要有两种类型：params和query

params的类型

• 配置路由格式： /router/:id

  {
    path: '/user/:userId',
    component: () => import('../components/User')
  }

• 传递的方式： 在path后面跟上对应的值

  <router-link :to="/user/ + userId" tag="button">用户</router-link>

• 传递后形成的路径：/route/123, /router/abc

  <template>
      <div>
        <h2>我是用户界面</h2>
        <p>我是用户的相关信息，嘿嘿嘿</p>
        <p>userId: {{userId}}</p>
      </div>
  </template>
  
  <script>
  export default {
    name: 'User',
    computed: {
      userId () {
        return this.$route.params.userId
      }
    }
  }
  </script>

query的类型

• 配置路由格式：/router，也就是普通配置

  {
    path: '/profile',
    component: () => import('../components/Profile')
  }

• 传递的方式：对象中使用query的key作为传递方式

  <router-link :to="{path: 'profile', query: {name: 'freedom', age: 18}}" tag="button">档案</router-link>

• 传递后形成的路径：/router?id=123,/router?id=abc

  <template>
    <div>
      <h2>我的档案</h2>
      <p>{{$route.query.name}}</p>
      <p>{{$route.query.age}}</p>
    </div>
  </template>

$route和$router的区别

• $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
• $route为当前router跳转对象，里面可以获取name、path、query、params等

4.9 导航守卫

我们来考虑一个需求:在一个SPA应用中,如何改变网页的标题呢?

• 网页标题是通过