当前位置：首页 > news >正文

Vue Router （基础知识）

news 2025/11/7 14:27:36

前言：

Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 核心深度集成，使构建单页面应用变得简单。Vue Router 主要用于设定访问路径，并将路径和组件映射起来，实现页面切换和跳转。

1、router-link（创建导航链接）

使得 Vue Router 能够在不重新加载页面的情况下改变 URL，处理 URL 的生成、编码和其他功能。

<template><div id="app"><router-link to="/">Home</router-link><router-link to="/hi">Hi</router-link></div>
</template>

2、router-view（渲染匹配到的组件）

用于展示匹配到的路由组件。当URL的路径与路由定义的路径相匹配时，router-view会渲染对应的组件，使得单页面应用（SPA）能够在不重新加载整个页面的情况下切换视图。

是 Vue Router 的占位符，用于显示当前路由匹配的组件内容，

<template><div id="app"><router-link to="/">Home</router-link><router-link to="/hi">Hi</router-link><router-view></router-view></div>
</template>

3、`$route（当前路由的全部信息）`

Vue Router 自动注入到每一个组件中的对象，它包含了当前路由的详细信息

属性	说明	示例	何时使用
`$route.path`	当前路由的路径部分（不包含查询参数和哈希）	`"/about"`	获取当前页面路径
`$route.fullPath`	完整的路由路径，包含查询参数和哈希	`"/about?from=home#section"`	显示或记录完整 URL
`$route.params`	动态路由参数（如 `/user/:id`中的 `id`）	`{ id: '123' }`	获取路由传参（动态段）
`$route.query`	URL 查询参数（即 `?key=value`部分）	`{ from: 'home', tab: 'info' }`	获取 URL 中的 `?`参数
`$route.hash`	URL 的哈希部分（即 `#section`）	`"#top"`	获取锚点或哈希导航
`$route.name`	当前路由的名称（需在路由配置中定义 `name`字段）	`"About"`	更安全地导航或判断路由
`$route.matched`	当前路由匹配的所有路由记录数组（包含嵌套路由信息）	`[ {...}, {...} ]`	高级用法，比如获取当前路由的元信息

<template><div><p><strong>当前路径（path）：</strong>{{ $route.path }}</p><p><strong>完整路径（fullPath）：</strong>{{ $route.fullPath }}</p><p><strong>查询参数（query）：</strong>{{ $route.query }}</p><p><strong>哈希（hash）：</strong>{{ $route.hash }}</p><p><strong>路由名称（name）：</strong>{{ $route.name }}</p></div>
</template>

url：http://localhost:3000/user/123?role=admin#profile

js：{ path: '/user/:id', name: 'UserProfile', component: UserProfile }

则效果：
当前路径（path）：/user/123
完整路径（fullPath）：/user/123?role=admin#profile
查询参数（query）：{ role: 'admin' }
哈希（hash）：#profile
路由名称（name）：UserProfile

4、创建路由器

// 从 vue-router 中导入两个方法：
import { createMemoryHistory, createRouter } from 'vue-router'// 导入两个 Vue 组件，分别作为路由对应的页面视图
import HomeView from './HomeView.vue'     // 首页视图组件，对应路径 '/'
import AboutView from './AboutView.vue'   // 关于页面视图组件，对应路径 '/about'// 定义路由配置数组，每个对象表示一条路由规则
const routes = [{ path: '/', component: HomeView },{ path: '/about', component: AboutView },
]// 创建并导出一个 Vue Router 的路由实例
const router = createRouter({// 指定路由使用的「历史记录管理模式」为 内存模式（Memory History）// 特点：不操作浏览器地址栏，适合在非浏览器环境（如 SSR、测试、CLI 工具等）下使用history: createMemoryHistory(),// 传入前面定义的路由配置数组，告诉路由器如何匹配路径与组件routes,
})// 最终导出的 `router` 实例可以挂载到 Vue 应用中，以启用路由功能
export default router  // （如果这是在单独的 router.js 文件中，通常需要 export default）

// - createMemoryHistory：创建一个「内存中的路由历史管理器」，不依赖浏览器地址栏，常用于 SSR、测试等环境
// - createRouter：用于创建一个 Vue Router 的路由实例

// 当访问路径为 '/'（根路径）时，渲染 HomeView 组件
// 当访问路径为 '/about' 时，渲染 AboutView 组件

5、use() 注册路由器插件

createApp(App).use(router).mount('#app')
或者
const app = createApp(App)
app.use(router)
app.mount('#app')创建一个 Vue 应用实例，传入根组件 App.vue
注册（挂载）路由插件，让 Vue 应用拥有路由功能（如 <router-link>、<router-view>）
注册（挂载）路由插件，让 Vue 应用拥有路由功能（如 <router-link>、<router-view>）

职责：

全局注册 RouterView 和 RouterLink 组件。
添加全局 $router 和 $route 属性。
启用 useRouter() 和 useRoute() 组合式函数。
触发路由器解析初始路由。

6、`useRouter()` 和 `useRoute()（`访问路由器和当前路由）

6.1 对于选项式API

6.1.1 this.$router

<template><button @click="goToHome">去首页</button>
</template><script>
export default {methods: {goToHome() {// 编程式导航：跳转到首页this.$router.push('/');},},
};
</script>

this.$router是 Vue Router 自动注入到每个组件中的路由实例，它提供了如下的方法：

push(path)：导航到新路由，并产生历史记录

replace(path)：导航但不保留历史记录（无法返回上一页）

go(n)：前进或后退 n 步

back()：后退一页

forward()：前进一页

6.1.2 `this.$route`

<template><div><p>当前路径: {{ currentPath }}</p><p>路由参数 ID: {{ id }}</p></div>
</template><script>
export default {computed: {currentPath() {// 获取当前路由的路径，比如 "/user/123"return this.$route.path;},id() {// 假设路由是 /user/:id，获取动态路由参数return this.$route.params.id;},},
};
</script>

this.$route是一个只读的对象，包含当前激活路由的信息，比如：

path：当前路径，如 "/about"

params：动态路由参数，如 /user/:id中的 id

query：URL 查询参数，如 /search?q=vue中的 { q: 'vue' }

name：路由的 name（如果你在路由配置中命名了路由）

fullPath：完整路径，包含查询参数等

hash：哈希值，如 #section1

6.2 对于组合式API

6.2.1 useRoute

useRoute 用于获取当前路由的状态信息，返回一个响应式对象，包含当前路由的详细信息，例如路径 (path)、参数 (params)、查询参数 (query) 等。它适合用于需要访问当前路由信息的场景，例如在组件中显示当前路径或参数。

<template><div><h1>当前路由信息</h1><p>路径：{{ route.path }}</p><p>名称：{{ route.name }}</p></div>
</template>
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
</script>

6.2.2 useRouter

useRouter 用于获取 Vue Router 的实例，提供了操作路由的方法，例如跳转 (push)、替换 (replace)、前进或后退 (go) 等。它适合用于需要动态操作路由的场景，例如页面跳转或监听路由变化。

<template><div><button @click="navigateToHome">前往首页</button></div>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const navigateToHome = () => {router.push('/');
};
</script>

方式	用法	说明
声明式导航（常用）	`<router-link to="/">首页</router-link>`	通过模板标签实现导航，类似 `<a>`标签，但不会刷新页面
编程式导航	`router.push('/')`	通过 JS 代码触发导航，比如点击按钮后跳转
替换当前路由（无后退）	`router.replace('/')`	类似 push，但不会留下历史记录，用户不能点击后退回到当前页
前进/后退	`router.go(n)`	类似 `window.history.go(n)`，n 为正数前进，负数后退

6.3 对比

场景	访问路由实例（用于跳转）	访问当前路由信息（路径、参数等）
选项式 API（Options API）	`this.$router`	`this.$route`
组合式 API / `<script setup>`	`const router = useRouter()`	`const route = useRoute()`

7、单文件组件

Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。

Vue 的单文件组件是网页开发中 HTML、CSS 和 JavaScript 三种语言经典组合的自然延伸。<template>、<script> 和 <style> 三个块在同一个文件中封装、组合了组件的视图、逻辑和样式。

<template><p class="greeting">{{ greeting }}</p>
</template><script setup>
import { ref } from 'vue'
const greeting = ref('Hello World!')
</script><style>
.greeting {color: red;font-weight: bold;
}
</style>

8、组合式API和响应式API

特性	选项式 API (Options API)	组合式 API (Composition API)
代码组织方式	按选项类型组织（data, methods, computed, 生命周期）	按逻辑功能组织（所有相关代码放在一起）
核心概念	`this` 上下文	响应式 API (`ref`, `reactive`) 和生命周期钩子
复用能力	混入 (Mixins) ，容易发生命名冲突和来源不清晰	组合式函数 (Composables) ，清晰的数据来源和命名空间
TypeScript 支持	支持一般，`this` 的类型推断较复杂	原生支持极好，类型推断简单明了
学习曲线	较低，结构固定，对初学者更友好	较高，需要理解响应式系统和作用域概念
灵活性	较低，受限于固定的选项结构	极高，可以像编写普通 JavaScript 一样组织代码
默认推荐	Vue 2 的默认方式，Vue 3 中仍完全支持	Vue 3 的官方推荐和新项目首选