1.历史记录
两种:哈希和html5
import {createRouter,createWebHashHistory,createWebHistory} from 'vue-router'
const router = createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
//history: createWebHashHistory(),
history: createWebHistory(),
routes, // `routes: routes` 的缩写
})
2.导航守卫
2.1全局前置守卫
路由数组页面index.js注册一个全局前置守卫,返回false代表所有路由导航取消
const router = createRouter({ ... })
router.beforeEach
((to,from)=>{
console.log(to);
console.log(from);
return false
})
to: 即将要进入的目标 用一种标准化的方式
from: 当前导航正要离开的路由 用一种标准化的方式
to:是要跳转的目的页面信息
from:是来自哪个页面的信息
从主页面点击admin后页面无变化,console信息如下
返回也可以返回另一个路由地址 达到跳转
问题: 但应该是不能跳转在同一个路由数组中的路径,可能因为设置了全局导航,导致一直回调?
router.beforeEach
(async(to,from)=>{
console.log(to);
console.log(from);
//return false
return {name:'aboutpage'};
})
2.2路由独享守卫
可以直接在路由配置上定义 beforeEnter 守卫
{
// 当 /user/:id/posts 匹配成功
// UserPosts 将被渲染到 User 的 <router-view> 内部
path: 'test',
component: Test,
beforeEnter:(to,from)=>{
return false;
},
},
3.路由元信息设置meta
{
path: '/about',
alias:'/myabout',
name:'aboutpage',
meta:{suibianname:true},
component: About
},
router.beforeEach
((to,from)=>{
if(to.meta.suibianname===true)
{
console.log(to.path +' is fail');
return false;
}
return true;
//{name:'aboutpage'};
})
3.动态路由
(和后端关联配合)不是动态路由匹配
3.1添加路由
router.addRoute() router.removeRoute()
此处的router是全局的路由实例,CreateRouter创建出来的,$router是当前的路由实例,只有全局的才可以动态添加修改删除路由
在导航守卫添加路由(以下内容实现不理解)
router.beforeEach(to => {
if (!hasNecessaryRoute(to)) {
router.addRoute(generateRoute(to))
// 触发重定向
return to.fullPath
}
})
上面的例子有两个假设:第一,新添加的路由记录将与 to 位置相匹配,实际上导致与我们试图访问的位置不同。第二,hasNecessaryRoute() 在添加新的路由后返回 false,以避免无限重定向。
因为是在重定向中,所以我们是在替换将要跳转的导航,实际上行为就像之前的例子一样。而在实际场景中,添加路由的行为更有可能发生在导航守卫之外,例如,当一个视图组件挂载时,它会注册新的路由。
根据以上修改
router.beforeEach
((to,from)=>{
// console.log(to);
//console.log(from);
//return false
if(to.meta.suibianname===true)
{
console.log(to.path +' is fail');
router.addRoute({path:'/routadd',component:Test});
return to.fullPath;
}
return true;
//{name:'aboutpage'};
})
3.2删除路由
当路由没有名称时,通过调用 router.addRoute() 返回的回调
const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话
通过使用 router.removeRoute() 按名称删除路由
router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')
3.3添加嵌套路由
router.addRoute('staff',{path:'setting',component:Test})
检查路由是否存在router.hasRoute():
获取一个包含所有路由记录的数组router.getRoutes():