<!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: '#app',
router,
data: {
},
methods: {
}
})
</script>
</body>
</html>
对于 toAbout这个路由设置一个重定向的函数,返回值就是重定向的目标
这里发现一个问题,就是 如果点击其他路由 redirect 也会执行
先点击 home 再点击 toAbout 还会连续执行两次
我期望的是点击 toAbout 执行一次 ,点击其他路由不会执行
请问一下这个是什么问题导致的