当前位置:网站首页>router路由
router路由
2022-08-09 23:30:00 【爷傲奈我何1】
一、vue路由
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。
Vue.js 路由使用前需要载入vue-router库
二、路由配置 /router/index
1、普通路由配置
{
path: '/user', //配置的路径
name: 'user', //名称
component: () => import('xxx)
}
2、路由传参
{
path:“/product/:id”,
name:"product",
component:xxx
}
<router-link to="/product/abc">
在页面中获取:$route.params.id
}
3、
404:要配置在最后面 { path:"*"}
4、编程式路由跳转
前进 forward() go(1)
后退 go(-1) back()
切换路由 push("/about")
替换路由 replace("/about")
三、路由信息
路由参数 params
查询 query
地址 path
全地址 fullPath
名称 name
四、路由守卫
1、组件内部
进入前:beforeRouterEnter(to,from,next)
to 要进入的路由
from 从哪个页面进入
next 下一步
next()进入to页面
next(true)进入to页面
next(false)不跳转
next(“/login”)跳转到登录
离开前 :beforeRouterLeave
更新前:beforeRouterUpdate
2、全局
beforeEach((to,from,next)=>{})
afterEach
3、 独享
beforeEnter()
作用:进入离开页面前做出拦截,处理事情(跳转提示,权限检查)
五、路由查询参数
传递
next("/login?redirect=/cart")
获取
var redirect = this.$route.query.redirect||'/user'
边栏推荐
猜你喜欢
随机推荐
工程 (七) ——PolarSeg点云语义分割
MVC与MVVM模式的区别
基于 LSTM 的分布式能源发电预测(Matlab代码实现)
Seq2Seq论文阅读笔记
hql语言
今日睡眠质量记录61分
MATLB|And her ups and downs and finally reached the peak of life [Romantic Journey]
下载markdown软件Obsidian(解决官网下载速度慢)
nfs配置
【集训DAY5】堆箱子【数学】
数据库的备份与恢复「建议收藏」
CMake使用记录
MQTT X Web:在线的 MQTT 5.0 客户端工具
CAD 截断线段
领跑政务云,连续五年中国第一
阿雷的血压有些低
Creo5.0 introductory tutorial free material
错误提示:Syntax error on token “function”, delete this token
C language learning journey [operator (incomplete version)]
ECCV 2022 | 微软开源TinyViT :搞定小模型的预训练能力