Vue-router(路由)
01
一、什么是路由？
说起路由你想起了什么？
路由器，那路由器是用来做什么的，你有没有想过？
- 路由时决定数据包从来源到目的地的路径；
- 将输入端的数据转移到合映射表适的输出端；
- 路由中最重要的概念就是路由表：路由表的本质就是一个映射表，决定了数据包的指向
02
二、后端路由
1. 早期的网站开发整个HTML页面是由服务器来渲染的。服务器将渲染好的对应的HTML页面返回给客户端进行展示；
2. 但是一个网站包含很多页面，那服务器是怎么处理的呢？
每个页面都有对应的网址，也就是URL
URL会发送给到服务器，服务器会通过正则对该URL进行匹配，最后交给Controller进行处理
Controller进行处理，最终生成HTML或者数据，然后返回给前端。
这其实就是服务器的一个IO操作，这其实就是对后端对路由的解析
3. 后端渲染的好处，相对于发送ajax请求拿数据，可以提高首屏渲染的性能，也有利于SEO的优化；
4. 后端路由的缺点：
另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码
而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情
03
三、前端路由
前后端分离阶段：
随着Ajax的出现，有了前后端分离的开发模式；
后端只提供API来返回数据(json，xml)，前端通过Ajax获取数据，并且可以通过JavaScript将数据渲染到页面中
这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上
并且当移动端(iOS/Android)出现后, 后端不需要进行任何处理, 依然使用之前的一套API即可
目前很多的网站依然采用这种模式开发
单页面应用阶段：
其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由
也就是前端来维护一套路由规则
前端路由的核心是什么呢？
改变URL，但是页面不进行整体的刷新
04
四、前端路由规则
1、URL的hash
URL的hash也就是锚点(#), 本质上是改变window.location的href属性
我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新
2、HTML5的history模式
history接口时HTML5新增的，它有5种模式改变URL而不刷新页面
history.pushState(data, title, url)
history.replaceState(data, title, url)
history.go(-1) 返回上一页
history.back() 等价于 history.go(-1)
history.forward() 等价于 history.go(1)
05
五、Vue-router基本使用
目前前端流行的三大框架，都有自己的路由实现：
Angular的ngRouter
React的ReactRouter
Vue的vue-router
1、认识vue-router
vue-router是Vue的官方路由插件，它和Vue是深度集成的，适合用于构建单页面应用 https://router.vuejs.org/zh/
vue-router是基于路由和组件,路由用于设定访问路径, 将路径和组件映射起来；在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.
2、安装router
一般项目中建议在cli创建项目时就直接选择需要路由，并搭配history模式。如果并未选择，那么安装教程请参照官网：
https://router.vuejs.org/zh/installation.html
3、路由使用
在src下的views中，创建 Home.vue 及 User.vue，随意写入一些信息。找到 router/index.js 中：
import Vue from 'vue'import VueRouter from 'vue-router'import Home from '@/views/Home.vue'const User = resolve => { require.ensure(['@/views/User.vue'], () => { resolve(require('@/views/User.vue')) }) };Vue.use(VueRouter) // 导入路由对象// 定义路由规则const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/user', name: 'User', // component: () => import(/* webpackChunkName: "user" */ '../views/User.vue') component: User }]// 创建路由实例const router = new VueRouter({ mode: 'history', // vue路由只有两种模式，一种是hash，一种是history，这里使用历史模式 base: process.env.BASE_URL, route})export default router可以看到，我们有两种引入组件的方式。第一种比较能理解，第二种我们称之为“路由懒加载”。而这个懒加载中，有个 webpackChunkName，这东西我们称为魔法注释。
魔法注释的作用：
webpack在打包的时候，对异步引入的库代码(lodash)进行代码分割时，为分割后的代码块取得名字。
Vue中运用import的懒加载语句以及webpack的魔法注释，在项目进行webpack打包的时候，对不同模块进行代码分割，在首屏加载时，用到哪个模块再加载哪个模块，实现懒加载进行页面的优化。
当你 npm run build 之后，生成的js文件中，就能看到以魔法注释定义的js文件名。
4、懒加载
懒加载的方式
// 方式一: 结合Vue的异步组件和Webpack的代码分析const User = resolve => { require.ensure(['@/views/User.vue'], () => { resolve(require('@/views/User.vue')) }) };// 方式二: AMD写法const User = resolve => require(['@/views/User.vue'], resolve);// 方式三: 在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.const Home = () => import(/* webpackChunkName: "user" */ '../views/User.vue')5、路由模式
vue中的路由默认时hash模式，使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
history模式提供了对历史记录进行修改的功能，只是当它们执行修改是，虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。history模式，会出现404 的情况，需要后台配置。
404 错误：
1、hash模式下，仅hash符号之前的内容会被包含在请求中，如 http://www.xxx.com, 因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；
2、history模式下，前端的url必须和实际向后端发起请求的url 一致，如http://www.xxx.com/book/id 。如果后端缺少对/book/id 的路由处理，将返回404错误。
6、路由跳转方式
我们可以使用 `outer-link 标签来实现跳转，如：
<div id="nav"> <router-link to="/">Homerouter-link> | <router-link to="/user">Userrouter-link>div><router-view/>然后通过 router-view 来显示页面。router-link 最终会被渲染为a标签。
7、编程式导航
我们还有别的方式：
this.$router.push('/user')我们除了push，还有replace、go、forward、back这几个来触发不同情况的跳转。
8、路由命名
当我们给路由命名后：
const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'User', // 对路由进行命名 component: () => import(/* webpackChunkName: "user" */ '../views/User.vue') } ]})我们就可以在跳转时，借用name属性实现跳转：
"{ name: 'user', params: { userId: 123 }}">User// 以上等同于router.push({ name: 'user', params: { userId: 123 }})而在User组件中，可以通过 $route.params.userId 获取到参数：
<div> 用户页{{$route.params.userId}}div>9、query传参
使用params传参，得到的结果与使用query传参得到的结果有以下区别：
this.$router.push({name: "User", params: {userId: 123}}) // http://localhost:8081/user/123this.$router.push({name: "User", query: {userId: 123}}) // http://localhost:8081/?userId=123重调强调：
编程式导航中，使用name进行路径跳转，携带参数可以通过params和query，其中query会将参数携带在导航路径上，而使用path进行路径跳转，无法携带params，只能携带query。
10、路由重定向
const routes = [ { path: '/', redirect: '/home' // 这就是路由的重定向，重新定义跳转路径 }, { path: '/home', component: () => import('@/views/Home.vue') }, { path: '/user', component: () => import('@/views/User.vue') }, { path: '/detail', component: () => import('@/views/Detail.vue') }, { path: '*', // 匹配所有剩余的路由，只要不是上面提及的页面，全部跳转到404页面 component: () => import('@/views/404.vue') }]11、嵌套路由
const routes = [ { path: '/', // 这里可以直接使用重定向，指定到某个子路由 redirect: '/home', component: () => import('@/views/Index.vue'), // 使用children包裹其他组件，就可以将它们变成当前路由的子路由 children: [ { path: '/home', component: () => import('@/views/Home.vue') }, { path: '/user', component: () => import('@/views/User.vue') }, { path: '/detail', component: () => import('@/views/Detail.vue') } ] }, { path: '*', component: () => import('@/views/404.vue') }]12、京东底部Tab栏
借助以上嵌套路由的模板，我们来写个京东底部Tab栏。新建 Index.vue ：
<template> <div class=""> <router-view>router-view> <ul> <li :class="num==1 ? 'active' : ''"><router-link to="/home">主页router-link>li> <li :class="num==2 ? 'active' : ''"><router-link to="/detail">详情页router-link>li> <li :class="num==3 ? 'active' : ''"><router-link to="/user">用户页router-link>li> ul> div>template><script>export default { data() { return { num: 1 }; }, created() { // 页面刷新时，可以监测当前路由地址，从而切换tab栏当前项 this.showWitch(); }, updated() { // 每次页面更新，就监测路由地址，从而切换tab栏当前项 this.showWitch(); }, methods: { // 定义一个方法，专门用来判断当前路由地址 showWitch() { switch (this.$route.path) { case "/home": this.num = 1; break; case "/detail": this.num = 2; break; case "/user": this.num = 3; break; default: this.num = 1; break; } } }};script><style lang = "less" scoped>* { margin: 0; padding: 0; border: 0; list-style: none;}ul { width: 100%; display: flex; justify-content: space-around; height: 40px; line-height: 40px; position: fixed; bottom: 0; left: 0;}li { a { color: #000; font-size: 30px; text-decoration: none; } &.active { a { color: red; } }}style>注意：
$route 和 $router 的区别：$router 指的是整个项目的路由配置，所以里面就包含了跳转路由的方法(push、replace、go、back、forward)；而 $route 指的是当前活跃的路由对象，所以能够获取当前页面的path、query、params
传参补充：
一般进入商品的详情页，都会选择携带参数，而通过router-link标签，我们无法像编程式导航一样直接携带query或params，所以我们需要这么来：
// router文件中{ path: '/detail/:productId?' // 这里加上?，是让这个参数变为可选项，不加问号的话，必须携带参数才能跳转到详情页 } // router-link标签上： "/detail/22"> // 详情页组件中： {{$route.params.productId}}实际上我们可以看得出来，在路由中携带参数的本质，还是通过params去传参。
13、导航守卫
我们来考虑一个需求：在一个京东应用中，未登陆，不能进入订单确认页面 解决的方法： 1. 在跳转到订单确认页面前做判断，登陆成功则可以顺利跳转，否则就跳转到别的页面去，或者登陆页面； 2. 上面的这种方式是可行的，但是页面多起来的时候就不能每个页面都写，代码冗余不好维护 那有没有更好的方式呢？ 1. 可以使用导航守卫 2. 什么是导航守卫？vue-router提供的导航守卫主要用来监听路由的进入和离开的；vue-router提供了beforeEach和afterEach的钩子函数，它们会在路由即将改变前和改变后触发前置导航守卫
src/router/index.js
导航钩子的三个参数解析：
1. to: 即将要进入的目标路由对象
2. from: 当前导航即将要离开的路由对象
3. next: 调用该方法后，才能进入下一个钩子函数
router.beforeEach((to, from, next) => { next() })比如，我们强制要求，只能从详情页进入用户页，其他页面若要进入用户页，就会强制跳进详情页。具体代码：
// 定义导航守卫router.beforeEach((to, from, next) => { if (to.path == '/user' && from.path != '/detail') { alert('请先登录'); next('/detail') return; } next(); // 没有next()方法，导航不会跳转 })后置导航守卫
router.afterEach( route => { console.log(route) })后置导航守卫 afterEach, 不需要主动调用next()函数
14、路由元信息
我们可以给任何一个路由添加 meta 元信息：
...// 定义路由规则const routes = [ { path: '/', redirect: '/home', component: () => import('@/views/Index.vue'), children: [ { path: '/home', component: () => import('@/views/Home.vue'), meta: { num: 0 } }, { path: '/user', component: () => import('@/views/User.vue'), meta: { num: 0 } }, { path: '/detail', component: () => import('@/views/Detail.vue'), meta: { num: 0 } } ] }, { path: '*', component: () => import('@/views/404.vue') }]...router.afterEach( route => { console.log(route)})export default router通过 $route.meta 可以获取到当前路由的元信息，如果想要获取当前组件纵向队列中所有路由的元信息(数组形式)，那么可以：$route.matched 。
把分享当成一种习惯
扫一扫
1131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
