Vue Router重定向指南

方石剑
5,461 阅读1分钟

简介

当使用Vue.js开发有许多页面并包含许多功能的Web应用程序时，如登录、认证、购物车以及大量的CRUD应用，我们需要在某些时候实现路由，这涉及到以编程方式或当用户通过URL访问路由时将用户从一个页面重定向到另一个页面。

在这篇文章中，我们将通过实际的代码示例学习Vue.js中重定向和路由的各种方法。

前提条件

Vue.js中的路由是通过使用vue-router 包来完成的，它使我们能够在Vue应用程序中轻松地执行单页路由。要在Vue中实现路由器重定向，我们必须首先在我们的项目中安装这个包，我们可以通过在终端运行以下命令来完成。

$ npm install vue-router@4

用Vue重定向

Vue.js中的所有路由都是在路由器的配置文件中配置的，这是一个专门用于Vue中所有类型的路由的文件。这个文件通常在/src/router/index.js 。

要使用一个路由，我们必须在路由器配置文件中声明它，之后我们可以在应用程序的其他部分引用它。路由可以通过各种方式实现，不同的场景可能需要不同的重定向，但让我们从最基本的重定向类型开始，然后再继续其他的重定向，如程序化重定向、条件重定向和错误重定向。

当用户导航到/home 路径时，说应该总是把他们重定向到/ 路径，从而显示HomePage 。这可以通过重定向来实现。

const routes = [
   {
      path: '/',
      name: 'Home',
      component: HomePage,
   },
   {
      path: '/home',
      redirect: '/',
   }
];

主要强调的是第二个对象，它吸收了path 和redirect 选项，当用户导航到设定的path ，它会自动将他们重定向到redirect 选项中设定的路径。

注意：我们会注意到，重定向实际上取代了链接，这意味着当我们导航到/home ，URL切换到/ ，从而显示出/ 路线的组件集。

在这种情况下，我们不希望URL改变，但我们希望它显示为/ 路由设置的组件，那么我们可以利用一个 别名.

别名

alias 是一个我们可以为现有路由添加别名的选项。实际上，我们可以有多个路由来处理一个特定的组件，而不是重定向到一个处理它的单一路由。

例如，当我们设置一个别名为/home ，而实际路径被设置为/ ，组件为HomePage ，当用户导航到/home ，会出现HomePage 组件，但URL仍然是/home 。

{
   path: '/',
   name: 'Home',
   component: HomePage,
   alias: '/home',
},

注意一个alias 可以接受一个以上的路径数组，这些路径可以包括参数。

{
   path: '/',
   name: 'Home',
   component: HomePage,
   alias: ['/home', '/homepage'],
},

现在--/,/home 和/homepage 实际上都处理同一个HomePage 组件!

程序化重定向

我们也可以执行程序性重定向，比如当一个按钮被点击或一个动作被执行时。这是由路由器的push() 方法处理的，它可以在我们应用程序的任何地方使用。在下面的例子中，当按钮被点击时，它会把用户带到指定的路径。

<template>
   <h2>Home Page</h2>
   <button @click="$router.push('/about')">Redirect Me</button>
</template>

这也可以在我们的脚本标签中使用this 关键字来处理。

<template>
   <h2>Home Page</h2>
   <button @click="redirectMe()">Redirect Me</button>
</template>

<script>
   export default {
      methods: {
         redirectMe() {
            this.$router.push('/about');
         },
      },
   };
</script>

值得注意的是，参数可以是我们之前使用的字符串路径，也可以是一个位置描述符对象，它可以接受名称、路径等。

// String path
$router.push('/about')

// Descriptor object with path
$router.push({ path: '/about' })

// Named route 
$router.push({ name: 'About' })

替换当前的URL

当我们使用程序化的方法进行导航时，我们就像用户通过手动点击一样推送和添加到浏览器的历史记录中。如果我们想在不创建新的历史记录的情况下进行推送--我们就想替换这个记录。

router.push({ path: '/about', replace: true })
// This is equivalent to
router.replace({ path: '/about' })

条件性重定向

我们可能想在一个特定的命令完成后重定向用户，例如当我们想认证一个用户，确认一个产品购买，等等。这通常是通过使用条件语句来完成的，例如。

<template>
   <h2>Home Page</h2>
   <button @click="checkUser()">Authenticate Me</button>
</template>

<script>
   export default {
      data(){
         return{
            isLoggedIn: true,
         }
      },
      methods: {
         checkUser() {
            if(this.isLoggedIn){
               this.$router.push('/dashboard');
            }else{
               this.$router.push('/login');
            }
         },
      },
   };
</script>

我们也可以不用创建方法来执行。

<template>
   <h2>Home Page</h2>
   <button @click="{ isLoggedIn ? $router.push('/dashboard') : $router.push('/login'); }">
      Authenticate Me
   </button>
</template>

<script>
   export default {
      data() {
         return {
            isLoggedIn: true,
         };
      },
   };
</script>

重定向到一个404页面

最后，包括当用户导航到不正确的路线时如何处理错误是有益的。当用户导航到一个没有在我们的路由器配置文件中声明的路由时，它会显示一个空的组件，这通常不是我们想要的行为。

通过捕捉所有的路由，除了那些用正则表达式配置的路由，并将它们分配给一个错误组件，就可以轻松地处理这个问题。

{
   path: '/:catchAll(.*)',
   name: 'ErrorPage',
   component: ErrorPage
}

结论

在这篇文章中，我们学习了如何在Vue中重定向以及如何以各种方式处理重定向。

avatar
文章
阅读
粉丝