vue-router 中重定向的问题

<!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 执行一次 ,点击其他路由不会执行
请问一下这个是什么问题导致的

阅读 2.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题