一、路由
-
路由就是路径和组件的映射关系。 在一个页面里, 切换业务场景 单页面 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"