了解Vue路由

基础概念

Vue 路由（Vue Router）是 Vue.js 官方的路由管理器。它和 Vue.js 核心深度集成，使构建单页面应用变得易如反掌。

优势

1. 嵌套的路由/视图表：可以根据不同的路径嵌套多层路由。
2. 模块化的、基于组件的路由配置：路由配置可以高度复用。
3. 路由参数、查询、通配符：可以指定路由参数，进行路由匹配等。
4. 视图过渡效果：结合 Vue.js 的过渡系统，可以很容易地实现视图过渡效果。
5. 细粒度的导航控制：可以精确地控制导航。

类型

1. 哈希模式：使用 URL 中的 hash（#）来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
2. 历史模式：依赖 HTML5 History API 和服务器配置。这种模式下，前端的 URL 就像正常的 URL，例如 http://yoursite.com/user/id。

应用场景

Vue 路由广泛应用于各种单页面应用（SPA）中，如：

• 管理后台系统
• 电商网站
• 社交媒体平台
• 博客系统

常见问题及解决方法

问题：为什么我配置了路由，但是页面没有跳转？

原因：

1. 路由配置错误。
2. 没有使用 <router-view> 标签来显示路由组件。
3. 导航链接使用了错误的路径或方法。

解决方法：

1. 检查路由配置是否正确。
2. 确保在应用模板中使用了 <router-view> 标签。
3. 使用 router-link 组件或 this.$router.push 方法来进行导航。

示例代码

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

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

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

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

<!-- App.vue -->
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>

参考链接

• Vue Router 官方文档

通过以上信息，你应该对 Vue 路由有了一个全面的了解，包括其基础概念、优势、类型、应用场景以及常见问题的解决方法。