<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="renderer" content="webkit">
<title></title>
<style>
</style>
</head>
<body>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/toHome">toHome</router-link>
<router-link to="/toAbout">toAbout</router-link>
<router-view></router-view>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script>
const router = new VueRouter({
routes: [{
path: "/",
component: {
template: "<div>Home</div>"
}
}, {
path: "/about",
name: "about",
component: {
template: "<div>About</div>"
},
}, {
path: "/toAbout",
redirect(to) {
// to "/toAbout"
console.log(to)
return {
name: "about"
}
}
}, {
path: "*",
redirect: "/"
}]
})
const app = new Vue({
el: "-sharpapp",
router,
data: {
},
methods: {
}
})
</script>
</body>
</html> set a redirect function for the toAbout route, and the return value is the redirected target
A problem is found here, that is, if you click on another route redirect will also execute
first click home and then click toAbout will execute twice in a row
what I expect is to click toAbout to execute once, click on other routes will not execute
excuse me, what is the cause of this problem