Vue 路由器重定向

您可以 配置 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);