加入以下代码:
//获取原型对象上的push函数
const originalPush = VueRouter.prototype.push;
//修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
};
例子:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta charset="UTF-8">
<meta name="author" content="strcpy"/>
<meta name="description" content="simple exmaple"/>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<a href="#/login?name=xiaochen&password=123">user login</a>
<a href="#/reg">user reg</a>
<router-link :to="{path:'/login'}">user login</router-link>
<router-link :to="{path:'/reg'}">user register</router-link>
<router-link to="/login">user login</router-link>
<router-link to="/reg">user register</router-link>
<router-link :to="{name:'login',query:{name:'xiaochen', password:'123'}}">user login</router-link>
<router-link :to="{name:'Register', params:{id:'123',name:'xiaochen'}}">user register</router-link>
<router-view></router-view>
<button @click="login" value="user login">user login</button>
<button @click="register" value="user login">user register</button>
</div>
</body>
<script>
const notFound = {
template:`<div><h3>404 not found 页面丢失了</h3></div>`,
};
const login = {
template: `<div><h3>user login</h3></div>`,
created(){
console.log("created");
console.log(this.$route.query.name);
}
};
const reg = {
template: `<div><h3>user register</h3></div>`,
created(){
console.log("created");
console.log(this.$route.params);
}
};
//获取原型对象上的push函数
const originalPush = VueRouter.prototype.push;
//修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
};
const router = new VueRouter({
routes:[
{path: '/', redirect:'/login'},
{path:'/login', component:login, name:'login'},
{path: '/reg/:id/:name', component: reg, name: 'Register'},
{path: '*', component: notFound}
]
});
const app = new Vue({
el: "#app",
data: {
msg: "basic use"
},
components: {
components: {
}
},
router,
methods:{
login(){
// if(this.$route.name != "login")
// this.$router.push({name:'Register'})
this.$router.push("/login")
console.log(this)
},
register(){
if(this.$route.name != "Register")
this.$router.push("/reg")
}
}
});
</script>
</html>
版权声明：本文为strcpy_s原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。