vue 路由

最新推荐文章于 2025-12-26 15:01:48 发布

原创最新推荐文章于 2025-12-26 15:01:48 发布 · 257 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue 路由是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA），实现页面之间的跳转和内容切换。‌

路由的核心概念

‌路由的本质‌：路由是路径（URL）与组件之间的映射关系。根据不同的路径，渲染对应的组件内容。‌
‌前端路由的作用‌：在单页面应用中，前端路由通过监听用户操作（如点击链接）来动态切换页面内容，而无需重新加载整个页面，提升用户体验。‌

路由模式

Vue Router 支持两种主要模式：

‌Hash 模式‌：URL 中包含 # 符号（如 http://example.com/#/home），通过监听地址栏哈希变化来实现路由切换。‌
‌History 模式‌：使用 HTML5 的 pushState 和 replaceState 方法，URL 看起来更简洁（如 http://example.com/home）。但上线时需要服务器支持，否则可能返回 404 错误。‌

基本使用步骤

1‌、安装 Vue Router‌：

npm install vue-router

2、创建路由配置‌：

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

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

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

export default router;

定义路由规则数组，指定路径和对应的组件。
创建路由器实例，并指定模式（默认为 hash 模式）。

3‌、在 Vue 应用中集成‌：

在主文件（如 main.js）中注册路由插件。
在组件模板中使用 <router-link> 实现声明式导航，用 <router-view> 指定组件渲染位置。

<template>
  <div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

高级功能

编程式导航‌：通过 JavaScript 代码实现跳转，例如：

this.$router.push('/home');

‌路由传参‌：支持通过 query 或 params 传递参数，组件内通过 $route.query 或 $route.params 获取。‌
‌嵌套路由‌：通过 children 属性定义子路由，实现路由嵌套（如 /admin/user/add）。‌
‌404 路由‌：在路由规则最后添加通配符 * 路由，处理未匹配的路径。‌
‌路由守卫‌：可设置全局或组件级守卫，实现权限验证等逻辑。