虽然在路由的基本Vue.js都已经被覆盖，今天我们将探索一些其他功能的Vue路由器所提供的如重定向和导航警卫。

已经涵盖的其他高级Vue Router主题包括Route Meta Fields和Nested Routes，因此请务必查看这些内容。话虽如此，让我们开始吧！

设置

由于这是关于Vue Router提供的高级路由功能，您可能已经知道如何完成基本设置。以防万一，这里有一个简单的设置：

# Yarn
$ yarn add vue-router
# NPM
$ npm install vue-router --save

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const Swamp = { template: '<div>Swamp</div>' };
const Gator = { template: '<div>Gator</div>' };

const router = new VueRouter({
  routes: [
    { path: '/swamp', component: Swamp },
    { path: '/gator', component: Gator }
  ]
});

const app = new Vue({
  router
}).$mount('#app');

重定向

有几种方法可以使用Vue Router完成重定向。重定向将更改到预期目标的路由，并在当前 URL 中反映此更改。

const router = new VueRouter({
  routes: [
    { path: '/swamp', component: Swamp },
    { path: '/gator', component: Gator },
    { path: '/croc', redirect: '/gator' }
  ]
});

当用户导航到 时/croc，他们将被重定向到/gator，地址栏中的 URL 将是/gator。

我们也可以使用一个函数来完成动态路由：

const router = new VueRouter({
  routes: [
    { path: '/swamp', component: Swamp },
    { path: '/gator', component: Gator },
    { path: '/croc', redirect: to => {
  return '/gator';
}}
  ]
});

在上面的代码中，参数to包含原始目标路由对象，其中包含路由的path或 等信息name。

别名

别名类似于重定向，但在路由匹配时不会更新 URL。

const router = new VueRouter({
  routes: [
    { path: '/swamp', component: Swamp, alias: '/bayou' },
    { path: '/gator', component: Gator },
    { path: '/croc', redirect: to => {
      return '/gator';
    }}
  ]
});

通过上述配置，用户导航到/swamp将获得Swampurl 为的组件/swamp。如果用户改为导航到/bayou，他们仍将获得Swamp组件，但 url 将保留/bayou。

导航卫士

现在我们已经介绍了Redirects，让我们介绍一个相关但更复杂的主题：Navigation Guards。Navigation Guards 允许我们vue-router通过重定向或取消动态阻止导航。如果我们的应用程序的用户没有查看权限/admin，我们可以取消或将用户重定向到适当的替代路线。这很重要，这样用户就不会接触到与其兴趣无关的组件。

作为一个基本示例，如果用户尚未通过身份验证，我们可以使用一个简单的 Navigation Guard 将用户重定向到登录页面：

  const router = new VueRouter({
  routes: [
    { path: '/swamp', component: Swamp, alias: '/bayou' },
    { path: '/gator', component: Gator },
    { path: '/croc', redirect: to => {
      return '/gator';
    }},
    { path: '/login', name: 'login', component: Login }
  ]
});

router.beforeEach((to, from, next) => {
  if (to.name !== 'login' && !isAuthenticated) {
    next({ name: 'login' });
  } else {
    next();
  }
});

我们还可以在每个路由的基础上定义守卫：

  const router = new VueRouter({
  routes: [
    { path: '/swamp', component: Swamp, alias: '/bayou' },
    {
  path: '/gator',
  component: Gator,
  beforeEnter: (to, from, next) => {
    console.log(`${from.path} to ${to.path}?`);
    next();
  }
},
    { path: '/croc', redirect: to => {
      return '/gator';
    }},
    { path: '/login', name: 'login', component: Login }
  ]
});

确保只调用 next() 一次，否则您可能会遇到错误或不正确的路径解析！

组件本身也可以强制执行自己的保护措施。这可能有用的一种方法是询问用户他们是否打算离开，并通过传递false到next(); 我们还可以访问组件this，这允许我们使用组件的方法和属性来确定我们的路由逻辑。

const Swamp = {
  template: '<div>Swamp</div>',
  beforeRouteEnter(to, from, next) {
    console.log('Welcome to the swamp!');
    next();
  },
  beforeRouteLeave(to, from, next) {
    const answer =
      window.confirm('Are you sure you want to leave?');

    if (answer) {
      next();
    } else {
      next(false);
    }
  }
};

请记住，当此代码在浏览器中运行时，无论导航卫士如何，用户都可以访问您的应用程序的所有代码。在生产应用程序上工作时，请始终记住在后端实施适当的验证和权限检查！

包起来

我们已经知道Vue Router是在你的Vue应用程序中提供路由的一个很好的解决方案，但今天我们已经介绍了一些Vue Router开箱即用的高级用例。与往常一样，请务必查看官方文档。查看其他一些高级功能，例如Transitions为您的应用程序增添趣味或Lazy Loading Routes以提高性能。