Vue Router 的安装、建立路由模块、启动路由和路由重定向

最新推荐文章于 2026-05-24 07:46:00 发布

原创最新推荐文章于 2026-05-24 07:46:00 发布 · 1.1k 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #前端

Vue Router 是 Vue.js 的官方路由管理器，它允许你构建单页应用（SPA），并能让你用 Vue.js 开发具有多视图的应用程序。Vue Router 遵循 Vue.js 的设计哲学，因此它和 Vue.js 核心深度集成，让构建路由变得简单而自然。

一、安装路由

1.安装

项目使用支持CommonJS规范的模块化打包器Webpack来构建时，可以使用NPM包的方式来安装路由。

代码和效果图如下

cnpm install vue-router --save

2.使用

用Vue-cli脚手架搭建的项目。在src文件夹下会有router文件夹，内部有index.js文件

打开index.js会看到下图引用

在入口文件main.js中导入router中的index.js文件，就可以使用路由配置的信息了

二、建立路由器模块

创建一个路由管理模块是设置 Vue 应用程序中页面导航的关键步骤。这个模块负责定义不同页面的路径和对应的组件。在项目的 router 目录中，你会找到一个名为 index.js 的文件，在这里，我们将使用 new Router 来初始化路由配置。每个路由条目都是一个包含三个主要属性的对象：

name：为路由指定一个唯一的名称，这有助于在代码中引用特定的路由。
path：定义路由的 URL 路径，用户在浏览器中访问这个路径时，将显示与该路径关联的组件。
component：指定与该路由关联的 Vue 组件，当访问该路径时，这个组件将被渲染。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 把对应的组件或页面引入进来
import Login from '@/pages/login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/', // 这里默认是跳转到 HelloWorld 组件，后期会改为项目首页
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login', // 登录页路径
      name: 'Login',
      component: Login
    }
    // 后续如果还有页面要跳转，按照这样的格式继续书写
  ]
})

三、启动路由器

1.配置

在 Vue 项目的 main.js 入口文件中，你需要启用并配置路由器。main.js 作为项目的入口点，允许你通过 import 语句导入所有必要的包和组件，然后在 Vue 应用中使用它们。为了使整个应用具备路由功能，你需要创建并挂载根实例，并通过 router 配置参数注入路由。如

2.渲染到APP.vue

经过上述的配置之后，路由匹配到的组件将会渲染到 App.vue 的 <router-view></router-view>。App.vue 里应该这样写，如示例 3 所示。最后 App.vue 会渲染到 index.html，代码如示例 4 所示。这样就会把渲染出来的页面挂载到 id 为 app 的 div 里了。

3.渲染到index.html

如下

四、路由重定向

路由重定向是 Vue Router 的一个功能，它允许你将用户从一个路由导航到另一个路由。这在你需要将用户从旧的 URL 重定向到新的 URL，或者在用户访问一个不存在的路由时显示一个特定的页面（如 404 页面）时非常有用。

以下是如何在 Vue Router 中设置路由重定向的基本方法：

1. 重定向到另一个路由

你可以在路由配置中使用 redirect 属性来实现重定向。例如，如果你想要将用户从 /old-path 重定向到 /new-path，可以这样设置：javascript

const routes = [
  {
    path: '/old-path',
    redirect: '/new-path' // 当访问 /old-path 时，会自动重定向到 /new-path
  },
  {
    path: '/new-path',
    component: NewPathComponent // 新路径对应的组件
  }
];

2. 重定向到命名路由

如果你想要重定向到一个命名路由，可以使用 {name: 'routeName'} 的格式：avascript

const routes = [
  {
    path: '/home',
    redirect: { name: 'home' } // 重定向到命名路由 'home'
  },
  {
    path: '/home',
    name: 'home',
    component: HomeComponent // 命名路由 'home' 对应的组件
  }
];

3. 重定向到带参数的路由

如果你需要重定向到一个带参数的路由，可以使用 params 属性：javascript

const routes = [
  {
    path: '/user',
    redirect: { name: 'user', params: { userId: '123' } } // 重定向到 /user/123
  },
  {
    path: '/user/:userId',
    name: 'user',
    component: UserComponent // 带参数的路由对应的组件
  }
];

4. 重定向到带查询参数的路由

如果你需要重定向到一个带查询参数的路由，可以使用 query 属性：javascript

const routes = [
  {
    path: '/search',
    redirect: { path: '/search-results', query: { keyword: 'vue' } } // 重定向到 /search-results?keyword=vue
  },
  {
    path: '/search-results',
    component: SearchResultsComponent // 带查询参数的路由对应的组件
  }
];

5. 在组件内部重定向

除了在路由配置中设置重定向，你还可以在组件内部使用 this.$router.push 或 this.$router.replace 方法来实现重定向：javascript

methods: {
  redirectToHome() {
    this.$router.push({ path: '/home' }); // 推送新的路由地址，导致页面跳转
    // 或者
    this.$router.replace({ path: '/home' }); // 替换当前路由地址，导致页面跳转
  }
}

这些方法可以在组件的生命周期钩子中使用，例如在 mounted 钩子中重定向用户。