[教程]掌握Vue.js，Vue Router导航不再迷茫：一步到位的实践指南

Vue.js 是一款流行的前端JavaScript框架，而 Vue Router 是其官方提供的路由管理库，用于实现单页面应用（SPA）中的页面导航和状态管理。本文将深入浅出地介绍 Vue Route...

Vue.js 是一款流行的前端JavaScript框架，而 Vue Router 是其官方提供的路由管理库，用于实现单页面应用（SPA）中的页面导航和状态管理。本文将深入浅出地介绍 Vue Router 的核心概念和用法，帮助开发者快速掌握其在 Vue.js 中的使用。

Vue Router 简介

Vue Router 与 Vue.js 核心深度集成，使得构建单页面应用变得简单高效。它允许开发者定义多个视图（组件），并在不同路径间切换，而无需重新加载页面。Vue Router 提供了丰富的功能，包括：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 自动激活 CSS 类的链接
• HTML5 历史模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

安装与配置 Vue Router

1. 安装

在 Vue.js 项目中，可以使用 npm 或 yarn 安装 Vue Router：

npm install vue-router@4
# 或者
yarn add vue-router@4

2. 基本配置

在项目的入口文件 main.js 中，引入并创建一个路由器实例：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');

在 router 文件夹中，创建一个配置文件 index.js，定义路由规则：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About }
];
const router = createRouter({ history: createWebHistory(), routes
});
export default router;

路由导航

命名路由

在定义路由时，可以为路由设置名称：

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

使用命名路由进行导航：

router.push({ name: 'Home' });

编程式导航

Vue Router 提供了多种编程式导航方法，例如 router.push() 和 router.replace()：

router.push('/about');
// 替换当前路由，不会向 history 添加新记录
router.replace('/about');

嵌套路由

在子路由中，可以使用 children 属性定义嵌套路由：

const routes = [ { path: '/', name: 'Home', component: Home, children: [ { path: 'news', name: 'News', component: News } ] }
];

动态路由匹配

在路由路径中使用动态路径参数，例如：

const routes = [ { path: '/user/:id', name: 'User', component: User }
];

在组件中，可以通过 this.$route.params 访问动态路径参数：

export default { name: 'User', computed: { userId() { return this.$route.params.id; } }
};

路由守卫

Vue Router 提供了全局守卫、路由独享守卫和组件内守卫，用于控制路由导航：

router.beforeEach((to, from, next) => { // ...
});

路由懒加载

对于大型应用，可以使用路由懒加载功能，按需加载组件，提高应用性能：

const routes = [ { path: '/about', name: 'About', component: () => import('./views/About.vue') }
];

总结

Vue Router 是构建单页面应用不可或缺的工具，通过本文的介绍和实践指南，相信您已经对 Vue Router 的使用有了基本的了解。在实际开发中，不断学习和积累经验，才能更好地发挥 Vue Router 的优势。