使用 Vue 和 Vue Router 进行高级路由选择：重定向和导航保护

虽然Vue.js中路由的基本知识已经(https://andsky.com/tech/tutorials/vuejs-intro-to-routing)被(https://andsky.com/tech/tutorials/vuejs-nested-routes)覆盖,但今天我们将探索Vue Router提供的其他一些功能,如(https://router.vuejs.org/guide/essentials/redirect-and-alias.html)和(https://router.vuejs.org/guide/advanced/navigation-guards.html)导航卫士。

其他已覆盖的先进Vue路由器主题包括路线Meta字段和巢路径所以请务必检查这些。

设置

由于这是Vue Router提供的先进路由功能,你可能已经知道如何完成一个基本的设置。

1# Yarn
2$ yarn add vue-router
3# NPM
4$ npm install vue-router --save

 1[label main.js]
 2import Vue from 'vue';
 3import VueRouter from 'vue-router';
 4
 5Vue.use(VueRouter);
 6
 7const Swamp = { template: '<div>Swamp</div>' };
 8const Gator = { template: '<div>Gator</div>' };
 9
10const router = new VueRouter({
11  routes: [
12    { path: '/swamp', component: Swamp },
13    { path: '/gator', component: Gator }
14  ]
15});
16
17const app = new Vue({
18  router
19}).$mount('#app');

重定向

我们可以通过Vue Router实现重定向的几种方法,重定向将更改到预期目标的路线,并在当前URL中反映这种变化。

1const router = new VueRouter({
2  routes: [
3    { path: '/swamp', component: Swamp },
4    { path: '/gator', component: Gator },
5    { path: '/croc', redirect: '/gator' }
6  ]
7});

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

我们还可以使用一个函数来实现动态路由:

1const router = new VueRouter({
2  routes: [
3    { path: '/swamp', component: Swamp },
4    { path: '/gator', component: Gator },
5    { path: '/croc', redirect: to => {
6  return '/gator';
7}}
8  ]
9});

在上述代码中,参数to包含原始目标路线对象,并包含路线的路径或名称等信息。

阿利亚斯

姓名就像重定向,但当路线匹配时不要更新URL。

1const router = new VueRouter({
2  routes: [
3    { path: '/swamp', component: Swamp, alias: '/bayou' },
4    { path: '/gator', component: Gator },
5    { path: '/croc', redirect: to => {
6      return '/gator';
7    }}
8  ]
9});

使用上述配置,导航到/swamp的用户将获得Swamp组件,其URL为/swamp。

航海警卫

现在我们已经涵盖了重定向,让我们涵盖一个相关但更复杂的主题:导航警卫。导航警卫使我们能够通过重定向或取消动态阻止在视图路由器中的导航。

作为一个基本的例子,我们可以使用一个简单的导航保护程序将用户重定向到登录页面,如果他们尚未认证:

 1const router = new VueRouter({
 2  routes: [
 3    { path: '/swamp', component: Swamp, alias: '/bayou' },
 4    { path: '/gator', component: Gator },
 5    { path: '/croc', redirect: to => {
 6      return '/gator';
 7    }},
 8    { path: '/login', name: 'login', component: Login }
 9  ]
10});
11
12router.beforeEach((to, from, next) => {
13  if (to.name !== 'login' && !isAuthenticated) {
14    next({ name: 'login' });
15  } else {
16    next();
17  }
18});

我们还可以根据路线定义守卫:

 1const router = new VueRouter({
 2  routes: [
 3    { path: '/swamp', component: Swamp, alias: '/bayou' },
 4    {
 5  path: '/gator',
 6  component: Gator,
 7  beforeEnter: (to, from, next) => {
 8    console.log(`${from.path} to ${to.path}?`);
 9    next();
10  }
11},
12    { path: '/croc', redirect: to => {
13      return '/gator';
14    }},
15    { path: '/login', name: 'login', component: Login }
16  ]
17});

<$>[警告] 请确保只拨打 Next() 一次,否则您可能会遇到错误或错误的路径分辨率! <$>

组件本身也可以强制执行自己的警卫,这可能有用的一种方式是问用户他们是否打算远离,并通过将假转移到下一步( )来取消导航;我们还可以访问组件的这,这使我们能够使用组件的方法和属性来确定我们的路由逻辑。

 1const Swamp = {
 2  template: '<div>Swamp</div>',
 3  beforeRouteEnter(to, from, next) {
 4    console.log('Welcome to the swamp!');
 5    next();
 6  },
 7  beforeRouteLeave(to, from, next) {
 8    const answer =
 9      window.confirm('Are you sure you want to leave?');
10
11    if (answer) {
12      next();
13    } else {
14      next(false);
15    }
16  }
17};

请记住,由于此代码在浏览器中运行,用户将可以访问您的应用程序的所有代码,而不论导航警卫。

包装上

我们已经知道Vue Router是提供Vue应用程序中的路由的绝佳解决方案,但今天我们已经涵盖了Vue Router支持的一些高级用例。