七、路由

一、路由的概念

路由的本质就是一种对应关系，根据不同的URL请求，返回对应不同的资源。

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

• 前端路由

  • 根据不同的事件来显示页面的内容，是事件与事件处理函数之间的对应关系

  • 本质：事件与事件处理函数之间的对应关系

• 后端路由

  • 由服务器端进行实现并实现资源映射分发

  • 本质：URL请求地址与服务器资源之间的对应关系

二、前端路由模式

1、hash模式

• hash路由模式：http://xxx.abc.com/#/xx，带有#号，后面就是hash值的变化

• 改变后面的hash值，它不会向服务器发出请求，因此也就不会刷新页面

• 每次hash值发生改变的时候，会触发hashchange事件，通过监听该事件，来知道hash值发生了哪些变化

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

2、history模式

HTML5的History API为浏览器的全局history对象增加了该扩展方法。它是一个浏览器（bom）的一个接口，在window对象中提供了onpopstate事件来监听历史栈的改变，只要历史栈有信息发生改变的话，就会触发该事件。

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

三、vue-router

1、安装vue-router

如果在vue-cli创建项目时没有勾选上vue-router选项，此时就需要手动来安装它（切记，要进入项目中再去运行这个指令）：

npm i -S vue-router

在package.json文件中dependencies选项中查看是否安装成功

2、路由文件的位置

• 位置：src/router/index.js

• 若创建项目时没有选择vue-router选项，需要自行创建

index.js：

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

// 引入组件
import Home from '../views/Home.vue'

// 使用vue-router
Vue.use(VueRouter)

// 定义路由规则
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

// 创建路由实例
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3、路由懒加载：

需要加载时再加载，而不是一开始全部加载

• 写法一

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

// 使用vue-router
Vue.use(VueRouter)

// 路由懒加载
const Home = () => import{'../views/Home.vue'}
const About = () => import{'../views/About.vue'}

// 定义路由规则
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

// 创建路由实例
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

• 写法二

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

// 使用vue-router
Vue.use(VueRouter)

// 定义路由规则
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

// 创建路由实例
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

4、在项目入口文件main.js中引入router

import Vue from 'vue'
import App from './App.vue'
// 路径./router后面的index.js可以省略不写
import router from './router'
import store from './store'

Vue.config.productionTip = false

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

5、App.vue文件中使用路由

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/" tag="button" replace>Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

<router-link></router-link>和<router-view></router-view>

• 它俩是vue封装好的组件

• router-link的to属性匹配跳转的路径

• router-link的tag属性可以指定渲染成的元素

• router-link的replace属性不会留下history记录，因此后退返回键无法使用

• router-view用来显示组件的位置（类似占位的作用）

6、路由重定向

概念：用户在访问地址 A 的时候，强制用户跳转到地址 B ，从而展示特定的组件页面

实现： 通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向

const routes = [
  { path: '/', redirect: '/user' },
  { path: '/user', component: User },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

7、嵌套路由

比如我们有一个/user的路由，那么/users下面还可以添加子级路由，

如:/user/name、/user/age等等，这样的路由情形称之为嵌套路由。

核心思想：在父路由组件的模板内容中添加子路由链接和子路由填充位（占坑），同时在路由规则处为父路由配置children属性指定子路由规则：

routes: [
  { 
      path: "/user", 
      component: User,     //这个不能丢
      // 通过children属性为/user添加子路由规则
      children:[
          { path: "name", component: Name },
          { path: "age", component: Age },
      ]
  }
]

<!-- 需要在 User组件中定义一个router-view 用于嵌套路由的渲染显示 -->
<router-view></router-view>

8、动态路由

所谓动态路由就是路由规则中有部分规则是动态变化的，不是固定的值，需要去匹配取出数据（即路由参数）。

// 传递参数id
const router = new VueRouter({
    // routes是路由规则数组 
    routes: [
        { path: '/user/:id', component: User },
        // 此处的“:”只是在声明的时候写，在使用的时候不需要写“:”
    ]
})

// 组件中获取id值（注意拼写）
const User = {
    template: '<div>User ID is {{$route.params.id}}</div>'
}

使用：

export default{
    methods: {
        show: function(id){
            this.$router.push('/film/showdetail/' + id)
        }
    }
}
// 如果路由规则里声明需要传递参数，但是实际使用的时候没传递参数会影响落地页的显示，显示成白板（但是不报错）。

在实际开发的时候会有可能需要传参也可能不需要传参的情况，这个时候需要用到可选路由参数点，需要在原有的路由参数声明位置后面加上个?即可。

{ path: "showdetail/:id?", component: ShowDetail },

9、命名路由

顾名思义就是给路由起名字（第2小节代码routes数组中对象的name属性）

10、参数传递

父组件

<template>
  <div id="app">
    <router-link :to="{path: '/profile', query: {name: 'zhangsan', age: 18}}">profile</router-link> 
    <router-view/>
  </div>
</template>

子组件接收

<template>
  <div id="profile">
    <div>{{$route.query.name}}</div>
    <div>{{$route.query.age}}</div>
  </div>
</template>

11、路由守卫

导航守卫就是路由跳转过程中的一些钩子函数，这个过程中触发的这些函数能让你操作一些其它事情时，可以进行过滤操作，这就是导航守卫。

• 全局守卫

// 全局前置守卫  路由规则文件中定义
// 当一个导航触发时,触发前置守卫，
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该next方法，否则路由不向下执行。
router.beforeEach((to, from, next) => {
  // ...
})

// 全局后置钩子
// 此钩子不会接受 next 函数也不会改变导航本身
router.afterEach((to, from) => {
  // ...
})

• 组件内守卫

// 可以在路由组件内直接定义以下路由导航守卫，手动更改地址栏中的路由不会触发`beforeRouteUpdate`和`beforeRouteLeave`钩子函数。
const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`（这个时候还没有进入到to对应的组件中，所以拿不到this）
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

四、导航方式

1、声明式导航

通过点击链接实现的导航方式，例如HTML中的“<a>”标签，Vue中的“<router-link>”所实现的。

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

2、编程式导航

通过调用JavaScript形式API实现的导航方式，例如location.href实现的跳转效果

this.$router.push("/login");
this.$router.push({ path:"/login" });
this.$router.replace({ path:"/login" });
this.$router.push({ path:"/login", query:{ username:"jack" }});
this.$router.push({ name:'user', params: { id:123 }});
this.$router.go( n );//n为数字  负数为回退

注：编程式导航在跳转到与当前地址一致的URL时会报错，但这个报错不影响功能，可以在路由入口文件index.js中添加如下代码解决该问题

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