Vue CLI 路由配置详解

2401_84961495

于 2024-12-24 17:41:30 发布

阅读量1.2k

点赞数 18

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/2401_84961495/article/details/144699325

Vue CLI 路由配置详解

引言

Vue CLI 是官方提供的用于快速搭建现代 Web 项目的脚手架工具。它不仅简化了项目初始化的过程，还提供了丰富的插件系统和命令行工具来支持开发、构建和部署等任务。当涉及到单页面应用（SPA）时，路由配置是不可或缺的一部分。本篇博客将详细介绍如何在使用 Vue CLI 创建的项目中配置 Vue Router，并解释其作用和具体使用方法。

Vue Router 的作用

Vue Router 是官方推荐的 Vue.js 路由管理器。它允许我们通过定义不同的 URL 映射到不同的组件，从而实现页面之间的导航，而无需重新加载整个页面。这有助于创建流畅的用户体验，同时保持应用的状态。

主要特性包括：

嵌套路由：支持复杂的用户界面结构。
编程式导航：可以编写代码来触发导航。
参数传递：URL 参数可以直接映射到组件属性。
重定向和别名：为路由设置重定向规则或别名。
懒加载：按需加载组件以优化性能。

安装 Vue Router

如果你使用的是 Vue CLI 创建的新项目，可以通过以下步骤安装 Vue Router：

vue add router

上述命令会自动为你添加 Vue Router 并进行基本配置。如果你需要手动安装，请使用 npm 或 yarn：

npm install vue-router --save
// 或者
yarn add vue-router

然后，在你的 main.js 文件中导入并使用 Vue Router：

import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue'; // 假设这是你的首页组件

const routes = [
  { path: '/', component: Home }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

createApp(App).use(router).mount('#app');

配置路由

接下来，我们将深入探讨如何配置路由。假设你有一个简单的应用，包含三个页面：Home、About 和 User。首先，你需要为每个页面创建对应的 Vue 组件文件，例如 Home.vue、About.vue 和 User.vue。

然后，更新 src/router/index.js 文件（如果使用 vue add router 自动生成，则该文件已存在），以包含新的路由规则：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';
import User from '../components/User.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/user/:id',
    name: 'User',
    component: User,
    props: true // 如果你想将 URL 参数作为 prop 传递给组件
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

使用路由

在你的主组件（如 App.vue）中，你可以使用 <router-view> 标签来指定路由匹配的组件应该渲染的位置：

<template>
  <div id="app">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link :to="{ name: 'User', params: { id: 123 }}">User</router-link>

    <router-view></router-view>
  </div>
</template>

动态路由与参数

上面的例子中，我们定义了一个带有参数的路由 /user/:id。这意味着任何以 /user/ 开始后跟一个 ID 的路径都会匹配这个路由。ID 可以在组件内部通过 $route.params.id 访问，或者，如果我们启用了 props: true，则可以直接作为 prop 接收。

<template>
  <div class="user">
    <h2>User Profile</h2>
    <p>User ID: {{ id }}</p>
  </div>
</template>

<script>
export default {
  props: ['id']
};
</script>

导航守卫

Vue Router 提供了多种导航守卫来控制导航过程。比如全局前置守卫、组件内守卫等。这些守卫可以在导航之前、之后执行某些逻辑，比如权限检查、页面卸载前的确认对话等。

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // ...
  next();
});

// 组件内的守卫
export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    next(vm => {
      // 通过 `vm` 访问组件实例
    });
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    next();
  }
};