《知识点累积》Vue Router3.x

Vue Router

功能

1.解析 router 传参及解析

//'http://192.168.182.229:8088/onemap?noheader=1'
let curRouter = this.$router.currentRoute;
if(curRouter && curRouter.query && curRouter.query.noheader) {
	this.noheader = false;
}
else {
	this.noheader = true;
}

2.监听 router 变化

watch:{
	$route(to,from){
	  console.log(from.path) // 从哪来
	  console.log(to.path) // 到哪去
	}
}

3.获取当前 router

this.$router.currentRoute.path;// 路径
this.$router.currentRoute.name;// name

4.vue 转换路由页

打开新页

// 原生方式
window.open(url, '_blank');
// vue router 方式
const { href } = this.$router.resolve({ path: url });
window.open(href, '_blank');

当前页

// 原生方式
location.href = url;
// vue router 方式
this.$router.push('/index');

5.hash 和 history 差异

Vue router3.x mode

hash默认

参考一

参考二

错误

1.Error: Redirected when going from “/siteInfo” to “/” via a navigation guard.

翻译：通过导航保护从“/siteInfo”转到“/”时重定向

解决方案一

降低 vue-router 版本，我的报错版本号是 3.5.1。网上建议改为 3.0.x，未使用；

解决方案二(推荐)

router/index.js文件中添加代码 2-6 行。

import Router from 'vue-router'
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
    if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
    return originalPush.call(this, location).catch(err => err)
}
Vue.use(Router)