Vue-Router

一、认识路由

1. 什么是路由

路由是一个网络工程里面的术语

路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动

生活中的“路由”概念：路由器。

（1）路由器提供了两种机制：路由和传送

路由是决定数据包从来源到目的地的路径

传送将输入端的数据转移到合适的输出端

（2）路由中有一个非常重要的概念叫路由表

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

2. 后端路由

（一）第一阶段：后端路由阶段

后端渲染：在后台通过特殊技术（如jsp）把网页写好，在服务器就已经通过java渲染好网页（不是通过ajax请求数据），然后将最终的网页直接传给浏览器，其中只有html和css。页面在后端渲染完成，并直接给前端，就是后端渲染，也叫服务端渲染。

后端路由：后端处理URL和页面之间的映射关系。

 （二）第二阶段：前后端分离阶段

前后端分离：后端只负责提供数据，不负责任何界面的内容

前端渲染：浏览器中显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的网页

 （三）第三阶段：单页面富应用阶段（SPA：simple page web application）

 SPA页面：整个网页只有一个html页面

前端路由：配置url和页面（组件）之间的映射关系，如点击首页，生成一个相应的url，但生成的url不会向服务器请求其他资源，而是通过一些js代码的判断，从已经请求到的全部资源中抽取出一部分资源（Vue中的组件，一个页面就是一个大组件），显示首页相关的内容

 前端路由的核心：改变URL，但是页面不进行整体的刷新

如何做到？

方式一：hash方式

 方式二：history模式

 类似栈结构，先进后出

 history.replaceState() 不能保存历史记录，不能返回

二、vue-router基本使用

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

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用

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

 搭建路由框架的步骤：

// 配置路由相关的信息
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

配置路由的映射关系的步骤： 

// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'
import Home from '../components/home'
import About from '../components/about'

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

// 2.创建VueRouter对象
const routes = [
  {
    path: '/home',
    component: Home
  }, {
    path: '/about',
    component: About
  }
]
const router = new VueRouter({
  // 配置路径和组件之间的映射关系（上面单独处理）
  routes,
  // 改为html5的history模式（没有#）
  mode: 'history'
})

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

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <!-- router-view表示组件渲染的位置 -->
    <router-view></router-view>
  </div>
</template>

 

 

 

 

 

 

 

 如果想要批量修改active-class，可以在路由相关配置index.js中修改

只需增加一个linkActiveClass属性

const router = new VueRouter({
  // 配置路径和组件之间的映射关系（上面单独处理）
  routes,
  // 改为html5的history模式（没有#）
  mode: 'history',
  linkActiveClass: 'active'
})

 

<template>
  <div id="app">
    <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>
    <!-- router-view表示组件渲染的位置 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    homeClick() {
      // 通过代码的方式修改路由vue-router
      // this指向当前组件,所有组件都有$router属性,该属性来自于vue-router源码
      // push相当于pushState，可以返回
      // this.$router.push("/home");
      this.$router.replace("/home");
    },
    aboutClick() {
      // this.$router.push("/about");
      this.$router.replace("/about");
    },
  },
};
</script>

 $router 表示全局的路由实例，是router构造方法的实例

$route 表示当前路由信息对象，即当前激活的路由的状态信息

路由信息对象：即$router会被注入每个组件中，可以利用它进行一些信息的获取。

 

 路由懒加载的使用

 

 

 

三、vue-router嵌套路由

 

 

 

四、vue-router参数传递

URL的组成：

协议://主机:端口/路径?查询#片段

scheme://host:port/path?query#fragment

 

 

 

 

五、vue-router导航守卫

导航守卫最主要的目的就是监听从哪里跳转到哪里

 

// 前置守卫(guard)，跳转前回调
router.beforeEach((to, from, next) => {
  // 从from跳转到to
  document.title = to.matched[0].meta.title
  next()
})

导航守卫补充

补充一：如果是后置钩子，也就是afterEach，不需要主动调用next()函数

// 后置钩子(hook)，跳转后回调
router.afterEach((to, from) => {
  console.log('-------')
})

 补充二：上面我们使用的导航守卫，被称为全局守卫

其他的守卫有：路由独享的守卫、组件内的守卫

  {
    path: '/about',
    component: About,
    meta: {
      title: '关于'
    },
    // 路由独享的守卫
    beforeEnter: (to, from, next) => {
      console.log('进入关于页面啦');
      next()
    }
  }

export default {
  name: "profile",
  // 组件内的守卫
  beforeRouteEnter(to, from, next) {
    console.log("进入档案啦！");
    next();
  },
};

六、keep-alive

把 <router-view />放在<keep-alive></keep-alive>中可以保持组件状态，不让组件被频繁地创建和销毁

activated() 和 deactivated() 这两个函数，只有该组件被保持了状态使用了keep-alive包裹起来时，才是有效的

例子：首页中有多个路由时，选择“消息”后，重新选择首页，如何保持“消息”选中状态

=> 首页中使用path属性记录离开时的路径，在beforeRouteLeave中记录

    <keep-alive>
      <router-view />
    </keep-alive>

  activated() {
    console.log("activated");
    // 激活时进行push操作
    this.$router.push(this.path);
  },
  // 组件内的守卫
  beforeRouteLeave(to, from, next) {
    // 记录下离开之前的path
    console.log(this.$route.path);
    this.path = this.$route.path;
    next();
  },

 exclude后面跟要排除的组件的name值,要排除多个时用逗号隔开，不要多加空格

    <keep-alive exclude="profile,User">
      <router-view />
    </keep-alive>