Vue 路由器重定向

Question

您可以 配置 Vue Router 以 使用 redirect 选项，例如下面的选项卡式 UI 有 3 个链接：一个到 /，一到 /about，和一个 /about-us，/about-us 链接配置为重定向到 /about，下面是 Vue 路由器 配置。注意 redirect 在 /about-us 小路。

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: { template: '<h1>Home</h1>' }
    },
    {
      path: '/about',
      component: { template: '<h1>About Us</h1>' }
    },
    // Note the `redirect` below.
    { path: '/about-us', redirect: '/about' }
  ]
});

下面是实际的应用程序。 请注意， router-link 对于 About Us Alternate 选项卡指向 /about-us。

const app = new Vue({
  router,
  template: `
    <div class="rendered-content">
      <div>
        <router-link to="/">Home</router-link>
        <router-link to="/about">About Us</router-link>
        <router-link to="/about-us">About Us Alternate</router-link>
      </div>
      <div class="tab-content">
        <router-view></router-view>
      </div>
    </div>
  `
}).$mount('#vue-redirect-example');

程序化导航

您还可以使用路由器的编程方式导航 push() 方法 。 下面的例子使用 $router.push() 将用户发送到 /about-us 网址。

const app = new Vue({
  router: router2,
  methods: {
    redirect: function(path) {
      this.$router.push({ path });
    }
  },
  template: `
    <div class="rendered-content">
      <div>
        <router-link to="/">Home</router-link>
        <router-link to="/about">About Us</router-link>
        <span @click="redirect('/about-us')">About Us Alternate</span>
      </div>
      <div class="tab-content">
        <router-view></router-view>
      </div>
    </div>
  `
}).$mount('#vue-redirect-example');