4.vue路由 + 项目

4.1 路由的概念

路由的本质就是一种对应关系，根据不同的URL请求，返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。

路由分为：后端路由和前端路由

后端路由：由服务器端进行实现并实现资源映射分发
- 概念：根据不同的用户URL请求，返回不同的内容（地址与资源产生对应关系）
- 本质：URL请求地址与服务器资源之间的对应关系
前端路由：根据不同的事件来显示不同的页面内容，是事件与事件处理函数之间的对应关系
- 概念：根据不同的用户事件，显示不同的页面内容（地址与事件产生对应关系）
- 本质：用户事件与事件处理函数之间的对应关系

SPA(Single Page Application)单页面应用程序，基于前端路由而起：整个网站只有一个页面，通过监听地址栏中的变化事件，来通过Ajax局部更新内容信息显示、同时支持浏览器地址栏的前进和后退操作。

4.2 前端路由实现

前端路由有2种模式：

hash模式

hash路由模式是这样的：http://xxx.abc.com/#/xx。有带#号，后面就是hash值的变化。改变后面的hash值，它不会向服务器发出请求，因此也就不会刷新页面。并且每次hash值发生改变的时候，会触发hashchange事件。因此我们可以通过监听该事件，来知道hash值发生了哪些变化。

window.addEventListener('hashchange', ()=>{ 
  // 通过 location.hash 获取到最新的 hash 值 
  console.log(location.hash); 
});

history模式（我们在创建创建项目的时候选择的就是这个）

history.pushState({},title,url); // 向历史记录中追加一条记录 
history.replaceState({},title,url); // 替换当前页在历史记录中的信息。 
window.addEventListener('popstate', function(event) { console.log(event) })

hash 纯前端操作，history需要后端的配合

hash路由体验

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a href="#/a">a页面</a>
  <a href="#/b">b页面</a>
  <a href="#/c">c页面</a>
  <a href="#/d">d页面</a>
  <div id="router-view"></div>
</body>
<script>
  const routerView = document.getElementById('router-view')

  window.addEventListener('hashchange', () => {
    // http://localhost:8080/#/a
    console.log(window.location.hash)
    render(window.location.hash.split('#')[1])
  })
  render('/a  ')
  function render (type) {
    switch (type) {
      case '/a':
        routerView.innerHTML = '首页'
        break;
        case '/b':
          routerView.innerHTML = '分类'
          break;
        case '/c':
          routerView.innerHTML = '购物车'
          break
        case '/d':
          routerView.innerHTML = '我的'
          break;
      default:
        break;
    }
  }
</script>
</html>

4.3 Vue Router

网址：Vue Router

4.3.1 介绍

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

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

4.3.2 安装

如果在vue-cli创建项目时没有勾选上 vue-router 选项，此时就需要手动的来安装它（切记，要进入项目中再去运行这个指令），不过我们之前创建项目时已经安装上了，所以下面的命令时不需要的。

cnpm i vue-router -S

查看是否安装成功，查看文件 package.json的依赖文件中是否包含 vue-router选项

4.3.3 Vue Router基本使用

Vue Router的基本使用步骤：

引入相关库文件（咱们使用脚手架创建，本身已经自带引入）
VueRouter引入到Vue类中（咱们使用脚手架创建，本身已经自带引入， src/router/index.js）

定义路由组件规则（查看项目文件下的src/router文件夹，里面有index.js）

感受路由懒加载带来的好处

import Vue from 'vue'
import VueRouter from 'vue-router'
// 不管需不需要使用该组件，先全部引入再说
import Home from '../views/Home.vue'
// import About from '../views/About.vue'
// 以中间价的形式生命 路由
Vue.use(VueRouter)

// 路由规则
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // component: About
    // 路由懒加载，进一步优化代码
    // 需要用到该组件时才去加载该组件
    // component: () => import('../views/About.vue')
    // webpackChunkName 起名字 -- 可读性更强
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

# 根据以下命令 打包后 查看 dist/js中的 文件的变化
cnpm run build

创建路由实例（查看项目文件下的src/router文件夹，里面有index.js）

把路由挂载到Vue根实例中（查看项目文件下的src/main.js）

添加路由组件渲染容器到对应组件中（占坑）（查看项目文件下的src/App.vue）

4.3.4 导航方式

在页面中，导航实现有2种方式：

声明式导航：通过点击链接实现的导航方式，例如HTML中的“a”标签，Vue中的“router-link”所实现的。
- 它就是先在页面中定义好跳转的路由规则，vueRouter中通过 router-link组件来完成

<router-link to="path">xxx</router-link>
<!--
to 要跳转到的路由规则 string|object
to="users" 
:to="{path:'path'}" 
-->

<template>
  <div id="app">
    <div id="nav">
      <!-- 声明式跳转-标签跳转
        router-link 默认渲染为 a 标签， to属性 渲染为 href 属性
        如果想要更改默认的 a 标签，可以使用 tag 属性
       -->
      <router-link to="/" tag="button">Home</router-link> |
      <router-link to="/about" tag="button">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style lang="stylus">
#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px
</style>

编程式导航：通过调用JavaScript形式API实现的导航方式，例如location.href实现的跳转效果
- 简单来说，编程式导航就是通过 JavaScript 来实现路由跳转

<template>
  <div id="app">
    <div id="nav">
      <!-- 声明式跳转-标签跳转
        router-link 默认渲染为 a 标签， to属性 渲染为 href 属性
        如果想要更改默认的 a 标签，可以使用 tag 属性
       -->
      <!-- <router-link to="/" tag="button">Home</router-link> |
      <router-link to="/about" tag="button">About</router-link> -->

      <!-- 编程式跳转-js跳转
        this.$router.push()
        this.$router.replace()
        this.$router.back()
        this.$router.go(num)
       -->
      <span @click="$router.push('/')">Home</span> |
      <span @click="$router.push('/about')">About</span>
    </div>
    <router-view/>
  </div>
</template>

<style lang="stylus">
#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px
</style>

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) { 
  return originalPush.call(this, location).catch((err) => err)
}