Vue基础知识总结-VueRouter

vue-router

1、vue-router如何响应 路由参数 的变化？

提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地watch (监测变化) $route 对象：

const User = {
	template: '...',
	watch: {
		'$route' (to, from) {
			// 对路由变化作出响应...
		}
	}
}

或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫：

const User = {
	template: '...',
	beforeRouteUpdate (to, from, next) {
		// react to route changes...
		// don't forget to call next()
	}
}
注意是：
	（1）从同一个组件跳转到同一个组件。
	（2）生命周期钩子created和mounted都不会调用。

2、完整的 vue-router 导航解析流

1）导航被触发。

2）在失活的组件里调用离开守卫。

3）调用全局的 beforeEach 守卫。

4）在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

5）在路由配置里调用 beforeEnter 。

6）解析异步路由组件。

7）在被激活的组件里调用 beforeRouteEnter 。

8）调用全局的 beforeResolve 守卫 (2.5+)。

9）导航被确认。

10）调用全局的 afterEach 钩子。

11）触发 DOM 更新。

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

3、vue-router有哪几种导航钩子（ 导航守卫 ）？

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

例如判断登录信息：没登录全部跳到登录页。判断必要操作是否进行没进行的话中断跳转。
参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象响应路由参数的变
化)来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

分为三大类：全局守卫、路由守卫、组件守卫

全局前置守卫

可以使用 router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
	// ...
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫
resolve 完之前一直处于 等待中。
  每个守卫方法接收三个参数：

• to: Route : 即将要进入的目标 路由对象
• from: Route : 当前导航正要离开的路由
• next: Function : 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
• next() : 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
• next(false) : 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
• next('/') 或者 next({ path: '/' }) : 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true 、 name:'home' 之类的选项以及任何用在 router-link 的 to prop或 router.push `中的选项。
• next(error) : (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法，否则钩子就不会被 resolved。

全局解析守卫

在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区
别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

全局后置钩子

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本
身：

router.afterEach((to, from) => {
	// ...
})

路由独享的守卫

你可以在路由配置上直接定义 beforeEnter 守卫：

const router = new VueRouter({
	routes: [
		{
			path: '/foo',
			component: Foo,
			beforeEnter: (to, from, next) => {
				// ...
			}
		}
	]
})

这些守卫与全局前置守卫的方法参数是一样的。

组件内的守卫

最后，可以在路由组件内直接定义以下路由导航守卫：

• beforeRouteEnter
• beforeRouteUpdate (2.2 新增)
• beforeRouteLeave

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

beforeRouteEnter 守卫 不能 访问 this ，因为守卫在导航确认前被调用,因此即将登场的新组件还没
被创建。
不过，你可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实
例作为回调方法的参数。

beforeRouteEnter (to, from, next) {
	next(vm => {
		// 通过 `vm` 访问组件实例
	})
}

注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和
beforeRouteLeave 来说， this 已经可用了，所以不支持传递回调，因为没有必要了。

beforeRouteUpdate (to, from, next) {
	// just use `this`
	this.name = to.params.name
	next()
}

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

beforeRouteLeave (to, from , next) {
	const answer = window.confirm('Do you really want to leave? you have unsaved
changes!')
	if (answer) {
		next()
	} else {
		next(false)
	}
}

4、vue-router传递参数的几种方式

1）使用name传递

之前一直在配置路由的时候出现一个name,但不知道他具体有什么用，在路由里他可以用来传递参数。
在index.js中将路由的name都写好

接收参数：

在我们需要接收它的页面里添加

<p>我是router-name:{{$route.name}}</p>

比如我在这里是在APP.vue中接收的，我希望切换每个页面都能看见参数。
但这种方法不太常用，因为我们觉得它不太规整。

2）to来传递

利用router-link 中的to来传参，看语法：

<router-link v-bind:to="{name:'xxx',params:{key:value}}"></router-link>

• a.首先：to需要绑定；

• b.传参使用类似与对象的形式；

• c.name就是我们在配置路由时候取的名字；

• d.参数也是采用对象的形式。

• 实际操作一下：

  => a.在APP.vue中将to里面的路径改成上面那样

<router-link :to="{name:'hellovue',params:{username:'tomcat'}}">hellovue页面
</router-link>

这里我们注意to的写法，前面加了冒号，因为那是绑定的，传递一个username过去，值为tomcat

​ => b.在index.js里面给hellovue配置名字叫hellovue,与上面name相对应

​ => c、在hellovue.vue中接收参数

<p>传递的名字是：{{$route.params.username}}</p>

3）采用url传参

在路由文件里采用冒号的形式传参，这就是对参数的绑定

• a、修改index.js里的path，这里我们修改myjob.vue组件

  

• b、在App.vue组件里传递参数

  

• c、在myjob.vue组件里显示我们要展示的内容（接收参数）

5、vue-router的动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对
于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中
使用“动态路径参数”(dynamic segment) 来达到这个效果：

const User = {
	template: '<div>User</div>'
}
const router = new VueRouter({
	routes: [
		// 动态路径参数 以冒号开头
		{ path: '/user/:id', component: User }
	]
})

现在呢，像/user/foo和 /user/bar 都将映射到相同的路由。

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，
可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

const User = {
	template: '<div>User {{ $route.params.id }}</div>'
}

你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

模式	匹配路径	$route.params
/user/:username	/user/evan	{ username: 'evan' }
/user/:username/post/:post_id	/user/evan/post/123	{ username: 'evan', post_id:'123' }

除了 $route.params 外， $route 对象还提供了其它有用的信息，例如， $route.query (如果 URL
中有查询参数)、 $route.hash 等等。

6、vue-router如何定义嵌套路由？

任何子路由都是在其父路由的组件中切换显示，不管是多少层的路由嵌套，都是这样的理解，所以父路由需要有以下两点，二者缺一不可

有组件引用
组件中有router-view组件

父路由没有引用组件，导致子路由没有承载容器，自然而然就出现了两层路由跳不起来等不起效的情况

7、 <router-link> </router-link> 组件及其属性

支持用户在具有路由功能的应用中 (点击) 导航 通过 to 属性指定目标地址
一：router-link组件的props：

• to

表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()

<router-link :to='/Home'>Home</router-link>
渲染结果：
<a href="Home">Home</a>

<router-link :to="{ path: 'register', query: { name: 'fjw' }}">router</routerlink>
渲染结果：
<a href="/register?name=fjw">router</a>

• tag

指定<router-link>组件最终被渲染成什么标签；非必须；如果没有tag属性，router-link默认会被渲染成a标签。在下面的例子中，渲染成了li标签。

<router-link :to='/Home' tag="li" >Home</router-link>
渲染结果：
<li>Home</li>
此时依旧会监听点击事件，触发导航

• replace

当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。

<router-link :to="{ path: '/abc'}" replace></router-link>

• append

则在当前 (相对) 路径前添加基路径。/a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>

• active-class

表示激活这个链接时，添加的class，默认是router-link-class。默认值可以通过路由的构造选项
linkActiveClass 来全局配置。

• exact

“是否激活” 默认类名的依据是 inclusive match (全包含匹配)。

<!-- 这个链接只会在地址为 / 的时候被激活 -->
<router-link to="/" exact>

• event

默认值: ‘click’ 声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

• exact-active-class

默认值: “router-link-exact-active” 配置当链接被精确匹配的时候应该激活的 class。

8、vue-router实现路由懒加载

在项目router/index.js文件中将

import About from '../views/About.vue'

更改为：

//方法1：
const About = () => import('../views/About')
//方法2：
const About = (resolve) => {
	import('../views/About').then((module) => {
        resolve(module)
	})
}

即可实现路由懒加载的效果

9、vue-router路由的两种模式

类型: string

默认值: "hash" (浏览器环境) | "abstract" (Node.js 环境)

可选值: "hash" | "history" | "abstract

配置路由模式:

• hash : 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。

• history : 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。

• abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式

Hash模式

Hash 模式是 Vue-Router 的默认模式，具体的体现是在浏览器地址栏上 URL 路径永远带着一个「#」号。在浏览器支持度上面，Hash 模式是比较强势的，甚至能兼容低版本的 IE 浏览器。「#」号后面内容的改变，不会引起页面对服务端的请求，所以也就不会重新加载页面。在部署服务器方面，个人认为 Hash 模式比 History 模式来得更为方便，因为 History 有 URL 重定向问题，需要在服务端去配置 url 重定向，否则会报 404 错误。市面上也有不少大厂是使用 Hash 模式进行开发的，比如网易云音乐

History 模式

HTML5 History API 提供了一个 history.pushState 和 history.reolaceState 方法（浏览器支持情况不是很乐观），它能让开发人员在不刷新网页的情况下改变站点的 URL。因为 Hash 模式会带上一个「#」号，会让 URL 地址变得比较难看，所以很多开发者都会选择 History 模式开发。但有个缺点，前端的 URL 必须和实际向服务端发起的请求的 URL 保持一致，如果服务端没有对相应的路由做处理，则会返回 404 错误页面。

拓展：前进，后退，跳转操作方法

history.go(-3);//后退3次
history.go(2);//前进2次
history.go(0);//刷新当前页面
history.back(); //后退
history.forward(); //前进

abstract 模式

abstract 模式针对的是没有浏览器环境的情况，比如 Weex 客户端开发，内部是没有浏览器 API 的，那么 Vue-Router 自身会对环境做校验，强制切换到 abstract 模式，如果默认在 Vue-Router 的配置项中不写 mode 的值，在浏览器环境下会默认启用 Hash 模式，在移动客户端下使用 abstract 模式。