6.vue3 移动端适配 组件守卫 路由的导航守卫

移动端适配

- 安装 cnpm i amfe-flexible postcss-pxtorem -S

- amfe-flexible 用于设置根字体大小的

- postcss-pxtorem 用来自动转换单位的

- 在根目录创建一个 .postcssrc.js

  ```
  module.exports = {
    plugins: {
      "postcss-pxtorem": {
        rootValue: 37.5,
        propList: ["*"],
      },
    },
  };

[normalize.css]

npm i sass -S

vant ui库

Vant 是一个轻量、可靠的移动端组件库

路由的导航守卫

全局守卫

​ beforeEach to from next

​ afterEach to from

路由独享的守卫

  beforeEnter(to,from,next){  //路由独享的守卫
          if(prompt("输入密码")==="admin"){
            next();
           }
   },

组件内的守卫

beforeRouteEnter(to,from,next){
        console.log("beforeRouteEnter")
        next((vm)=>{  //vm 当前组件的实例
          console.log(vm.k)
        })
 },
 beforeRouteUpdate(to,from,next){ //监控路由的变化
        console.log(to.query.q)
          next();
      }, 
   beforeRouteLeave(to,from,next){
        let n=Math.ceil(Math.random()*10)
        let m=Math.ceil(Math.random()*10)
        if(prompt(`${n}+${m}=?`)==n+m){
          next();
        }
        else {
          alert("密码错误，不能退出")
        }
        
        
      },