vue相关—路由

params传参和query传参

是路由传参的两种常见形式，区别在于

query传参，参数在url中可见，是标准的url传参形式。使用？分割参数和url地址
params传参，参数在url默认是不可见的，除非设置了占位符
query传参不怕刷新，刷新之后参数还在
params传参除非设置了占位符，否则参数不能在刷新之后保存

编程式跳转

使用this.$router.push(路由对象)实现跳转

路由拦截

beforeEach 就是路由拦截

router.beforeEach((to,from,next)=>{//beforeEach是在所有的路由跳转之前执行,常常用来做全局拦截  
   console.group('brfore')
   console.log(to)//to表示到哪儿去
   console.log(from)//from表示从哪儿来
   console.log(next)
   next()//表示继续执行，如果在beforeEach中不调用next就是不执行了
   console.groupEnd()		
})

afterEach(不常用)

router.afterEach((to,from)=>{//afterEach表示路由跳转之后执行
    console.group('after')
    console.log(to)//to表示到哪儿去
    console.log(from)//from表示从哪儿来
    console.groupEnd()	
})

在vue中使用图片

<img :src="XZ" alt />//本地图片
<img :src="WZ" alt />//远程图片
    
data() {
  return {
      //   此写法是因为webpack中要引入资源文件需要使用require或者import
      // 此处使用的是file-loader加载器
      // 另外一种写法引入文件  
      // import xx from '../assets/images/xy.jpg'
      XZ: require('../assets/images/xy.jpg'),//网址图片的话就不需要require或者import了
      // XZ: xx,
      WZ:'网络地址链接'
    }
}

路由登录判断

• 在登录页面中写一个点击事件loginHandle

methods: {
    // 登录成功之后把把token写入本地存储
    loginHandle() {
      localStorage.setItem('token', '123')
      this.$router.push({
        name: 'User'
      })
    }
  }

• 退出登录同理

methods: {
    //点击之后token清除
    logOut() {
      localStorage.removeItem('token')
      this.$router.push({
        name: 'Login'
      })
    }
  }

• 判断用户是否登录

// meta是元属性，可以在路由跳转的时候当参数进行传递，可以存储一些自定义数据
{
    path: '/user',
    name: 'User',
    meta: {
      needLogin: true// 是否需要登录
    },
    component: () => import('../views/User.vue')
  },
      
      
router.beforeEach((to, from, next) => {
    if (to.meta.needLogin) {// 是否包含这个属性
    if (localStorage.getItem('token')) {// 判断当前用户有没有登录 看看有没有token数据 
      next()
    } else {
      next({// 跳转回Login
        name: 'Login'
      })
    }
  } else {
    next()
  }
})

---

文中如有不妥之处，欢迎大家留言指正，非常感谢
☺永远不知道自己的大脑也会像爱因斯坦一样☺