vue学习笔记（history、导航守卫、动态路由）

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()：