Vue.js Vue-router 重定向到未找到页面（404）

在本文中，我们将介绍如何使用Vue.js和Vue Router来实现重定向到未找到页面（404）的功能。

什么是Vue.js和Vue Router？

Vue.js是一个流行的JavaScript框架，用于构建用户界面。它通过将数据和DOM进行绑定，使得开发者可以轻松地构建交互式的前端应用程序。Vue Router是Vue.js官方提供的路由管理器，用于实现单页面应用（SPA）的路由功能。

为什么需要重定向到未找到页面？

在一个前端应用中，有时可能会遇到用户访问一个不存在的页面的情况。为了提供更好的用户体验，我们可以将用户重定向到一个特定的页面，通常是一个自定义的404页面。这样，用户就不会看到默认的浏览器404页面，而是看到我们设计的友好的提示页面。

设置Vue Router的重定向规则

在Vue.js项目中，我们可以使用Vue Router的重定向功能来实现页面未找到的重定向。首先，我们需要在路由配置中定义一个404页面的路由规则。例如：

const routes = [
  // ...其他路由规则
  { path: '/404', component: NotFound },
  { path: '*', redirect: '/404' }
]

在上面的代码中，我们定义了一个名为NotFound的组件，并将它作为路径为/404的路由组件。而后面的{ path: '*', redirect: '/404' }表示对所有未匹配的路径进行重定向到/404。

然后，我们需要在Vue Router中引入定义好的路由规则。例如：

import Vue from 'vue'
import VueRouter from 'vue-router'
import NotFound from './views/NotFound.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes
})

export default router

在上面的代码中，我们引入VueRouter并通过routes配置创建了一个新的路由实例。然后，将这个路由实例暴露出去，供Vue.js应用使用。

创建自定义的404页面

接下来，我们需要创建一个自定义的404页面组件。这个组件将呈现给用户，当他们访问一个不存在的页面时被重定向到。例如：

<template>
  <div>
    <h1>页面未找到</h1>
    <p>对不起，您访问的页面不存在。</p>
  </div>
</template>

<script>
export default {
  // 组件的逻辑和内容
}
</script>

在上面的代码中，我们简单地创建了一个包含标题和文本的组件。你可以根据自己的需求进行样式和内容的优化。

测试重定向功能

为了测试重定向功能，我们可以尝试在浏览器中输入一个不存在的路由，然后刷新页面。或者，在应用内部使用router.push()方法进行路由导航。

export default {
  methods: {
    redirectToNotFoundPage() {
      this.$router.push('/nonexistent-page')
    }
  }
}

在上面的代码中，我们通过使用router.push()方法将用户导航到一个不存在的页面。

总结

通过使用Vue.js和Vue Router，我们可以方便地实现重定向到未找到页面（404）的功能。只需定义一个404页面的路由规则，并在路由配置中进行重定向设置。然后，创建一个自定义的404页面组件来呈现给用户。这样，当用户访问一个不存在的页面时，就会看到我们设计的友好的提示页面。这不仅提高了用户体验，还提供了更好的可维护性和可定制性。