搞懂Vue-Router的概念和使用，看完这篇文章就够了

官方是这样定义的：

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：嵌套路由映射，动态路由选择，模块化、基于组件的路由配置…

上面为什么说key路径对应的value有可能是一个函数，因为路由也 前端和后端之分；

后端路由：

• value是funtion，用于处理客户端提交的请求

• 服务器接受到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

前端路由：

• value是component，用于显示页面内容

• 当浏览器路径发生变化时，对应的组件就会显示

四. 项目中路由基本使用

===========================================================================

路由的基本使用，其实官方介绍的很详细；这里注意一下，vue2.x版本使用路由V3.x版本，vue3.x版本使用路由V4.x版本；

如果你在最初创建项目的时候，选择一起安装vue-router的话，项目代码也就配置好了，下面我们来手动安装配置一下；（以vue3项目为例）

首先，在项目中安装vue-router

npm install vue-router@4

其次，在src文件夹下面创建一个router文件夹，并在其下创建index.js

import { createRouter, createWebHashHistory } from ‘vue-router’

import Login from ‘…/views/Login.vue’

const routes = [

{

path: ‘/login’,

component: Login

},

{

path: ‘/home’,

component: () => import(‘…/views/index.vue’),

}

]

const router = createRouter({

history: createWebHashHistory(),

routes

})

export default router

然后，在main.js里面注册路由

import {createApp } from ‘vue’

import App from ‘./App.vue’

import router from ‘./router’

const app = createApp(App)

app.use(router)

最后，在项目组件中添加 < router-view /> 视图

路由可以多层嵌套，这里就不多讲啦，具体可以查看官网中的嵌套路由的具体讲解；

五. 路由传参

======================================================================

• < router-link >标签传参

前面我写过专门的介绍，可点击vue中路由传参方式之一（router-link 进行页面按钮式路由跳转传参）查看；

• 编程式路由传参

前面我写过专门的介绍，可点击vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）查看；

六. 路由守卫

======================================================================

全局路由守卫

• beforeEach( (to,from,next) => {}) — 在初始化和路由切换之前调用

• afterEach((to,from) => {}) — 在初始化和路由切换之后调用

项目中可以利用beforeEach全局前置路由守卫来做权限路由访问

独享路由守卫

• beforeEnter(to, from，next) — 某个路由独享的，只有进去之前

const routes = [

{

path: ‘/home’,

component: () => import(‘…/views/index.vue’),

beforeEnter: (to, from，next) => {

//符合权限的可以进去该单个路由

…

},

},

]

组件路由守卫

• beforeRouteEnter(to,from,next)

• beforeRouteUpdate(to,from,next)

• beforeRouteLeave(to,from,next)

beforeRouteEnter(to, from，next) {

//通过路由规则，进入该组件时被调用

// 在渲染该组件的对应路由被验证前调用

// 不能获取组件实例 this ！

// 因为当守卫执行时，组件实例还没被创建！

},

beforeRouteUpdate(to, from,next) {
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦，如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可获取，包括答案解析。

义、实战项目、讲解视频，并且会持续更新！**

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦，如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可获取，包括答案解析。

[外链图片转存中…(img-iomTsY9z-1712762487625)]