Vue路由重定向失败求助：如何将'/home'重定向至'/travel'？

嘿，我来帮你搞定这个路由重定向的问题！作为Vue新手，遇到这种小问题太正常了，咱们一步步拆解～

问题根源 #

你现在的代码里应该是缺少了路由配置中的重定向规则，所以点击Home链接时，路由还是会尝试加载Home组件，不会自动跳转到Travel页面。

两种实现重定向的方法 #

方法一：路由配置中直接设置redirect（推荐） #

这是最简洁直接的方式，在路由规则里给/home路径添加重定向目标即可。下面是完整的可运行代码：

<div id="app">
  <div>
    <router-link to='/home'>Home</router-link>
    <router-link to='/news'>News</router-link>
    <router-link to='/travel'>Travel</router-link>
  </div>
  <div>
    <router-view></router-view>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3/dist/vue-router.js"></script>
<script>
// 定义组件
var Home = { template: '<h3>Home</h3>' };
var News = { template: '<h3>News</h3>' };
var Travel = { template: '<h3>Travel</h3>' };

// 核心：路由配置添加重定向规则
const routes = [
  // 关键！访问/home时自动跳转到/travel
  { path: '/home', redirect: '/travel' },
  { path: '/news', component: News },
  { path: '/travel', component: Travel },
  // 可选：设置默认路由，访问根路径或不存在的路径时跳转
  { path: '*', redirect: '/travel' }
];

// 创建路由实例
const router = new VueRouter({
  routes
});

// 挂载Vue实例
new Vue({
  el: '#app',
  router
});
</script>

方法二：组件内使用导航守卫（适合特殊场景） #

如果你需要在进入Home组件时再触发跳转（比如需要判断某些条件），可以在Home组件里添加beforeRouteEnter守卫：

var Home = {
  template: '<h3>Home</h3>',
  beforeRouteEnter(to, from, next) {
    // 进入Home路由时直接跳转到Travel
    next('/travel');
  }
};

验证效果 #

配置完成后，点击页面上的Home链接，浏览器地址栏会自动变成/travel，同时页面会渲染Travel组件的内容，重定向就生效啦～

内容的提问来源于stack exchange，提问作者Sylvia