vue杂记

vue中 style scoped就是默认给每个css加一个前缀 防止重复
在scoped中设置html和body之类属性是无法设置的
所以需要自己在新建一个style标签 无scoped属性 用来设置html

axios请求文档

前端路由需要配置404页面 防止找不到请求对应的组件
{
        path: '*',
        redirect: '/'
  }

前端路由 校验token

router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  if (to.path === '/login') {
    next()
  }
  else {
    let token = localStorage.getItem('userToken')
    if (token === null || token === '') {
        alert('令牌已过期 请重新登陆')
        next({
          path: '/login',
          query: {
              redirect: to.fullPath
          }
      })
    } else {
      next()
    }
  }
})

vue中设置背景图片方式

document.getElementsByTagName('html')[0].style.backgroundImage = "url(" + require('../assets/image/loginBg.jpg') +")"
切记需要require

vue中watch监听路由参数使用

watch: {
            $route: {
                handler() {
                    this.list = this.$route.meta.list
                },
                //深度监听，同时也可监听到param参数变化
                deep: true,
                // 首次绑定参数时 不会监听 有更改时才会执行监听操作
                immediate: true
            }
        }
        

v-for循环时候  最好使用两个参数 (item, key)
v-for="item in homeList[1]" :key="item.order" :class="item.class"

// 解决vue路由重复点击出错问题

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

vuerouter传递参数params问题
https://www.cnblogs.com/daniller/p/vueRouter.html