vue-router

最新推荐文章于 2025-09-22 09:18:23 发布

原创最新推荐文章于 2025-09-22 09:18:23 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue Router是Vue.js官方的路由插件，用于构建单页面应用，通过路由和组件实现页面切换。它有两种模式：hash模式，基于location.hash，不刷新页面；history模式，利用HTML5新特性，需后端配合处理。路由跳转可通过编程式导航或组件式导航实现，同时支持query和params两种传参方式。路由守卫包括全局、组件级和单个路由的守卫，用于控制页面访问流程。

vue-router

一、路由概念

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。

router：译为路由器，我们可以理解为一个容器或者说它是一个管理者，举个常见的场景的例子：当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由；

二、路由原理

路由就是用来解析URL实现不同页面之间的跳转

三、路由两种模式

1.hash模式

URL的hash 是以#开头，是基于location.hash来实现的。Location.hash的值就是URL中#后面的内容。当hash改变时，页面不会因此刷新，浏览器也不会请求服务器。
特点：
hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用， hash不会重加载页面。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

2.history模式

history采用HTML5的新特性；且提供了两个新方法：pushState（）
，replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
特点:
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如地址后加上/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。

四、跳转页面

编程式导航
我们一般在js种使用this.$router.push({path:"/路径"})来跳转页面
组件式导航

<router-link to="/index"> 首页</router-link>
// router-link相当于我们的a标签，to是我们要加载哪个模块种的内容，值为我们路由配置好的路径

五、路由传参

路由传参三种：
分别是query，params，动态路由传参

方式	发送	接收
query	this.$router.push({path:’/index’,query:{id:id}})	this.$route.query.id
params	this.$router.push({name:‘Index’,params:{id:id}})	this.$route.params.id

区别：
(1) query可以使用name和path而params只能使用name
(2) 使用params传参刷新后不会保存，而query传参刷新后可以保存
(3) Params在地址栏中不会显示，query会显示
(4) Params可以和动态路由一起使用，query不可以

还有一种动态路由传参
你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

模式	匹配路径	$route.params
/user/:username	/user/evan	{ username: ‘evan’ }
/user/:username/post/:post_id	/user/evan/post/123	{ username: ‘evan’, post_id: ‘123’ }

六、路由守卫

路由守卫分三种：全局守卫、组件级守卫、单个路由守卫

1.全局守卫

无论访问哪一个路径，都会触发全局的钩子函数，位置是调用router的方法

2.组件级守卫

跟data和methods同级放在要守卫的组件里

3.单个路由守卫

单个路由规则守卫在路由配置中，只有访问到这个路径，才能触发钩子函数

全局的路由守卫有：
1、router.beforeEach 全局前置守卫进入路由之前
2、router.afterEach 进入路由之后

组件守卫：
1、beforeRouteEnter(){ } 路由跳转进入之前
2、beforeRouteUpdate(){ } (2.2新增) 页面参数更新时触发
3、beforeRouteLeave(){} 离开这个路由触发

单个路由守卫：
beforeEnter(){}

路由守卫钩子函数里面有三个参数分别是to,from,next

to和from是将要进入和将要离开的路由对象。
next()这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。
next() 进入该路由
next(false): 取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)。 next 跳转新路由，当前的导航被中断，重新开始一个新的导航