本文主要是介绍Vue-router路由+导航守卫+mata,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
一、路由
-
路由就是路径和组件的映射关系。 在一个页面里, 切换业务场景 单页面 SPA(single page web application) 应用 整个应用只有一个完整的页面 点击页面中的导航链接不会刷新页面 ,只会做页面的局部更新 数据需要通过ajax请求获取
二、路由的基本使用
-
<router-link> to='/user' 切换路由地址 切换路由 <router-view> 存放路由
在项目内src文件夹下的router文件夹配置
在App.vue内存放路由
(在别的页面跳转可直接用 <router-link to="/地址">)
三、编程式路由跳转 $router
-
前进 $router.forward() $router.go(1) 后退 go(-1) back() 切换路由 push("/about") 替换路由 replace("/about")
五、路由信息$route
路由参数
params
查询
query
地址
path
全地址
fullPath
名称
name
哈希值
hash
六、路由守卫
全局守卫 - 前置
全局 -后置
router.afterEach((to,from) =>{console.log(to,from) }
独享路由守卫
{//这里不用加斜name:'xinwen',path:'news',component:News,meta:{isAuth:true},// 独享路由守卫beforeEnter:(to,from,next)=>{if(to.meta.isAuth){if(localStorage.getItem('school')=== 'aiguigu'){next()}else{alert("请登录")}}}
组件内
// 组件路由// 通过路由规则,进入该组件时被调用beforeRouteEnter(to,from,next){console.log('我进来了',to)},// 通过路由规则,离开该组件时被调用beforeRouteLeave(to,from,next){}
路由元信息
{
path:path,name,component,
meta:{noFooter:true}
}$rouye.meta.noFooter 范围
路由查询参数
传递
next("/login?redirect=/cart")获取
var redirecr = this.$route.query.redirect||"/user"
这篇关于Vue-router路由+导航守卫+mata的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!