vue——编程式导航、路由守卫、路由的两种工作模式

编程式导航

1.作用：不借助实现路由跳转，让路由跳转更加灵活

2.具体编码：

methods: {
    pushShow(v) {
      // 可以在外侧加个定时，这样就可以实现延迟跳转
      // 追加一条记录
      this.$router.push({
        name: "zhanshi",
        query: { id: v.id, title: v.title },
      });
    },
    replaceShow(v) {
      // 替换上一条记录
      this.$router.replace({
        name: "zhanshi",
        query: { id: v.id, title: v.title },
      });
    },
  },

3.操作：

 methods: {
    back() {
    //后退到上一条记录
      this.$router.back();
    },
    forward() {
    //前进到下一条记录
      this.$router.forward();
    },
    test() {
    //可前进也可后退，取决于填入的数字的正负
      this.$router.go(2);
    },
  },

缓存路由组件

1.作用：让不展示的路由组件保持挂载，不被销毁

2.具体编码：

在展示组件的router-view标签外层添加一个keep-alive标签，该标签的include属性值是所要缓存的组件name值

<!-- include里面的值是组件的name值 -->
      <keep-alive include="News">
        <router-view></router-view>
      </keep-alive>

路由特有的生命周期钩子

1.作用：路由组件独有的两个钩子，用于捕获路由组件的激活状态

2.具体名字：

​ 2.1 activated：路由组件激活时触发（消失到出现的过程：从其他组件到该组件）

​ 2.2 deactivated：路由组件失活时触发（出现到消失的过程：从该组件到其他组件）

路由守卫

1.作用：对路由进行权限控制

2.分类：全局守卫、独享守卫、组件内守卫

​ 2.1 全局守卫

// 全局前置路由守卫：初始化的时候被调用，每次路由切换之前被调用，都会调用这个回调函数
/* to:跳转到哪个组件，
from：来自哪个组件，*/
//next()：放行，进行路由跳转
router.beforeEach((to, from, next) => {
    // 判断要去的组件路径
    // to.path === '/home/news' || to.path === '/home/msg'
    // to.name === 'xainwen' || to.name === 'xiaoxi'
    // 判断元信息里面isAuth，判断是否需要权限
    if (to.meta.isAuth) {
        // 判断本地存储里面的school的值是否为xsh，若不是则不会进行路由跳转
        if (localStorage.getItem('school') === 'xsh') {
            next()
        } else {
            alert('学校名不对，无权限查看')
        }
    } else {
        next()
    }
});
// 全局后置路由：初始化的时候被调用，每次路由切换之后被调用
router.afterEach((to, from) => {
    // 路由跳转之后才会改变title值
    document.title = to.meta.title || 'vue'
    console.log(from);
})

2.2 独享守卫

独享路由守卫只有前置before，没有后置after路由守卫

是在某个路由规则里面配置

beforeEnter: (to, from, next) => {
                    if (to.meta.isAuth) {
                        if (localStorage.getItem('school') === 'xsh') {
                            next()
                        } else {
                            alert('学校名不对，无权限查看')
                        }
                    } else {
                        next()
                    }
                } 

2.3 组件内守卫

写在vue文件里面，和data、mthods同级

beforeRouteEnter(to, from, next) {
    if (to.meta.isAuth) {
      // 判断本地存储里面的school的值是否为xsh，若不是则不会进行路由跳转
      if (localStorage.getItem("school") === "xsh") {
        next();
      } else {
        alert("学校名不对，无权限查看");
      }
    } else {
      next();
    }
  },
  // 通过路由规则离开该组件时被调用

  beforeRouteLeave(to, from, next) {
    console.log(to, from);
    next();
  },

路由的两种工作模式

1.url的hash值——#及其后面的内容就是hash值

2.hash值不会包含在HTTP请求中，即：hash值不会带给服务器

3. hash模式

3.1 地址中永远带着#号，不美观；

3.2 若以后将地址通过第三方手机app分享，若app效验严格，则地址会被标记为不合法

3.3 兼容性好

4. history模式

4.1地址栏干净、美观，没有#

4.2兼容性和hash模式相比略差

4.3应用部署上线时粗腰后端人员支持，解决刷新页面服务器404的问题

设置路由的工作模式

const router =new VueRouter({
	mode:'hash',//设置路由的工作模式，默认的是hash模式
	routes:[{}]
})

.map文件是映射文件