VueRouter

路由，vue是单页面应用，通过组件来显示不同的视图，路由就是通过设定路径来控制组件的显示与隐藏，实现页面的跳转与切换。

一个路由就是一个键值对，键是路径，值是组件。

VueRouter的作用

vue的核心概念之一：页面组件化、SPA。

由于vue是单页面应用，且每个功能模块都可以封装为组件，因此不可能和多页面应用一样直接通过超链接跳转，换句话说只有一个html，还能跳转到哪儿去？那如何让vue可以在一个页面中如何切换不同的组件？
这也是vue-router要解决的根本目的：让SPA像多页面应用一样实现跳转。

vue-router钩子函数

全局的：beforeEach、beforeResolve、afterEach
路由的：beforeEnter
组件的：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
参数：to、from、next；正对不同的钩子函数参数有所差异。

除了afterEach全局后置外，其他的守卫中务必要调用next(),否则无法完成导航
还有注意全局前置守卫可以用来进行拦截（登录拦截）

route和router有什么区别

route：代表当前路由信息对象，可以获取到当前路由的信息参数

$route.fullPath ：完成解析后的url，包含查询参数和hash的完整路径

$route.path：路径，字符串类型，解析为绝对路径

$route.hash： 当前路由的hash值（带#号的），如果没有hash值则为空字符串

$route.name：当前路由的名称，如果有的话（用于命名路由）

$route.params：一个键值对对象，路由参数

$route.query：一个键值对对象，表示url查询参数

$route.matched：一个包含了当前路由的所有嵌套路径片段的路由记录（routes配置数组中的对象副本）

$route.redirectedFrom：重定向来源的路由的名字，如果存在重定向的话。

router：代表路由实例的对象，包含了路由的跳转方法，钩子函数等

属性：

$router.app ：配置了router的Vue根实例

$router.mode：路由模式，这里是hash

$router.currentRoute：当前路由的路由信息对象，包含了当前匹配路由的信息

方法：

守卫：router.afterEach()

路由跳转：router.push( location ) router.replace( location )

路由之间如何跳转

组件导航
router-link router-view

编程导航
router.push
router.replace
router.go

vue-router完整的导航解析流程

1.导航被触发；

2.在失活的组件里调用beforeRouteLeave守卫；

3.调用全局beforeEach守卫；

4.在复用组件里调用beforeRouteUpdate守卫；

5.调用路由配置里的beforeEnter守卫；

6.解析异步路由组件；

7.在被激活的组件里调用beforeRouteEnter守卫；

8.调用全局beforeResolve守卫；

9.导航被确认；

10.调用全局的afterEach钩子；

11.DOM更新；

12.用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数。

从零开始写一个vue路由

1. 为了方便后期维护，建议独立出一个 router.js 文件
2. npm install vue-router
3. 引入注册

import Router from 'vue-router';
Vue.use(Router);

4. 向外暴露出一个router实例

export default new Router({
    mode: '',
    path: '',
    name: '',
    ...
});

路由懒加载

动态导入，需要跳转到要用的页面的时候在对该页面进行加载

1.vue的异步组件：resolve=>require([‘需要异步加载的组件’]，resolve)

2.es6的import方法：

利用 箭头函数 和 import 来实现动态加载

// 将 import UserDetails from './views/UserDetails' 替换成
const UserDetails = () => import('./views/UserDetails')

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

3.webpack的 require.ensure： r => require.ensure([],()=>r( require(需要异步加载的组件))，chunkName)

路由重定向

在用户访问一个特定的地址时,将其重定向到另一个指定的地址

{
	path:'/goback',
	redirect:'/'
}

active-class

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；

如何获取路由传过来的参数？

如果使用query方式传入的参数使用this.$route.query 接收
如果使用params方式传入的参数使用this.$route.params接收

router-link

vue-router插件的其中一个组件, 用于跳转路由, 类似于a标签, 它一般也会渲染成a标签, 但是可以通过tag来变更默认渲染元素, 通过to来跳转

路由有几种模式

路由配置时，设置 mode，默认为 hash

前端路由实现的本质是监听 url 变化，实现方式有两种：Hash 模式和 History 模式，无需刷新页面就能重新加载相应的页面。

Hash url 的格式为www.a.com/#/，当#后的哈希值发生变化时，通过 hashchange 事件监听，然后页面跳转。

History url 通过history.pushState和history.replaceState改变 url。

两种模式的区别：

• hash 只能改变#后的值，而 history 模式可以随意设置同源 url；
• hash 只能添加字符串类的数据，而 history 可以通过 API 添加多种类型的数据；
• hash 的历史记录只显示之前的www.a.com而不会显示 hash 值，而 history 的每条记录都会进入到历史记录；
• hash 无需后端配置且兼容性好，而 history 需要配置index.html用于匹配不到资源的情况。

vue-router怎么配置404页面？

const router = new VueRouter({ mode: 'history', routes: [ { path: '*', component: NotFoundComponent } ] })

path: ‘*’ 注意要放在最后

*代表全匹配 你放在第一个 不管地址是什么都会 匹配到了 放在最后一个 前面有的就不会匹配到