「从零开始的 Vue 3 系列：第七章——深入学习核心功能—

前言

本系列将从零开始，系统性地介绍 Vue 3 的常用 API，逐步深入每个核心概念与功能模块。通过详尽的讲解与实战演示，帮助大家掌握 Vue 3 的基础与进阶知识，最终具备独立搭建完整 Vue 3 项目的能力。

Vue核心功能之一Router

ue 3 中的 Vue Router 是用于构建单页面应用程序（SPA）的官方路由管理器，它提供了强大而灵活的导航机制，让开发者可以轻松地管理应用内的多页面导航。

安装配置步骤

1.npm安装Router

cd my-vue-app
npm install vue-router@4

2.配置 Vue Router

引入router
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(), // 使用 HTML5 History 模式routes
});
export default router;

3.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');

4.在应用中使用路由

<template><div id="app"><nav><ul><li><router-link to="/">Home</router-link></li><li><router-link to="/about">About</router-link></li></ul></nav><router-view></router-view></div>
</template><script>
export default {name: 'App'
}
</script>

内容详解：

1.声明式路由配置

在 Vue Router 中，你可以使用声明式方式定义应用的路由规则。每个路由映射到一个组件，当用户访问某个路径时，Vue Router 会渲染与之关联的组件。

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

2.动态路由

动态路由允许你使用参数（如用户 ID 或文章 ID）来匹配不同的路径。例如，/user/:id 可以匹配 /user/1 或 /user/2 等不同的路径，并通过 $route.params 访问这些参数。
后面的一篇关于权限的文章会详细介绍动态路由的使用

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

3.嵌套路由

嵌套路由（也称为子路由）可以在应用中创建多层嵌套的视图结构。例如，一个主页可以有多个子视图，这些子视图各自拥有自己的路由。
嵌套路由也是我们工作中用到非常多的一个功能

const routes = [{//路由地址path: '/parent',//页面文件位置component: () => import('@/views/jlsbjc/index'),//子路由children: [{ path: 'child',//子路由组件component: Child },],},
];

4.导航守卫

Vue Router 提供了钩子函数（如 beforeEach 和 beforeResolve），可以在路由发生变化之前或之后执行逻辑。这对于权限验证、数据预加载等操作非常有用。
之后权限文章也会详细讲解路由守卫

router.beforeEach((to, from, next) => {//to代表着你要去哪里（表示即将要进入的目标路由对象。）//from代表着你从哪里来（代表当前导航正要离开的路由对象。）//next重定向，如果没有权限就直接跳转到指定的路由页面，一般是登录页面// 判断用户是否有权限访问该路由if (to.meta.requiresAuth && !isAuthenticated()) {//如果没有就重定向到页面首页next('/login');} else {// 继续导航next();}
});

5. 路由懒加载

为了优化性能，Vue Router 支持路由的懒加载功能，即只有在用户访问某个路由时才加载对应的组件。这样可以减少初次加载时的资源体积，提高页面响应速度。

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

6. 滚动行为

Vue Router 支持自定义页面滚动行为，你可以指定当用户导航到新页面时页面的滚动位置。这在单页应用中提升了用户体验。

const router = createRouter({history: createWebHistory(),routes,scrollBehavior(to, from, savedPosition) {if (savedPosition) {return savedPosition;} else {return { top: 0 };}},
});

7. 路由模式（history、hash）

在 Vue Router 的 hash 模式和 history 模式中，Vue 提供了一些常用的方法来进行导航操作。无论是 hash 模式还是 history 模式，这些方法的使用方式是相同的，主要的差异体现在路由模式的 URL 表现形式和浏览器交互方式上。

1. 用于导航到一个新的 URL 地址：router.push()

this.$router.push('/about'); // 使用路径
this.$router.push({ path: '/about' }); // 或者使用对象形式
this.$router.push({ name: 'about' }); // 使用命名路由
this.$router.push({ path: '/about', query: { id: 123 }}); // 带有查询参数

1. 替换当前的路由，不会向 history 栈中添加新记录。：router.replace()

this.$router.replace('/about');
this.$router.replace({ name: 'about' });
this.$router.replace({ path: '/about', query: { id: 123 }});

1. 用于在浏览器历史记录中向前或向后导航：router.go()

this.$router.go(1);  // 前进一页
this.$router.go(-1); // 后退一页

4.等价于 router.go(-1)，用于返回到上一个路由：router.back()

this.$router.back();

5.用于前进到下一个路由。：router.forward()

this.$router.forward();

在 Vue Router 中可以通过配置路由来选择 history 模式或 hash 模式。默认是 hash 模式，如果想要使用 history 模式，需如下配置：

const router = new VueRouter({mode: 'history', // 使用 history 模式routes: [{ path: '/about', component: About },{ path: '/contact', component: Contact }]
});