Vue问题

vue问题

#(1)vouter的addRoutes方法---用户权限
//自定义添加路由方法,防止重复添加路由
#使用后
路由结构
const user = () => import('../views/user/list')
const routeArr = [
  {
    path: '/user/list',
    name: '用户管理',
    show: 'user',
    component: user,
  },
 ]
导航守卫
const commonUser = window.localStorage.getItem('menuList')
const commonUserRoute = routeArr.filter(function (page) {
  return commonUser.includes(page.show)
})
router.addRoutes(commonUserRoute)

router.beforeEach((to, from, next) => {
  if (to.name === null || to.name === '') {
    Message.error('您无权访问该页面！')
    next({ name: 'Error' })
  } else {
  next()
  }
})

#(2)var that=this的使用
	使用事项：
    axios请求中this指向这个回调函数,可以在axios请求外面设置that=this,that就会指向这个自身实例
	eg:methods:{
        searchMusic(){
            var that=this;
            axios.get("http://xxxxx.com").then(
            function(res){
            	that.mustlist=res.data.songs;//如果使用this就会代表这个axios回调函数
            }
            )
        }
    }
	`可以使用箭头函数代替函数就不会出现在实例中this指向问题`

#(3)router和route的区别
#this.$router和this.$route的区别
	1.this.$router是VueRouter实例方法，是全局路由的，可以使用this.$router.push()方法跳转路由，但会留下history记录，this.$router.replace()替换路由不会留下记录
    	方法:
	   $router.push
        // 命名的路由
           this.$router.push({ name: 'user', params: { userId: 123 }})
        // 带查询参数，变成 /register?plan=123
           this.$router.push({ path: 'register', query: { plan: '123' }})
	   $router.go
        // 页面路由跳转 前进或者后退
	   this.$router.go(-1) // 后退

	2.this.$route是当前路由,包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。
      方法：
    	1.$route.path
      		  字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。
        2.$route.params
              一个 key/value 对象，包含了 动态片段 和 全匹配片段，
              如果没有路由参数，就是一个空对象。
        3.$route.query
              一个 key/value 对象，表示 URL 查询参数。

#(4)/deep/和>>>
	在style用scoped属性实现组件的私有化时，深层样式不生效使用/deep/和>>>

	/deep/可以用于各种预处理器(/deep/在vue 3.0会报错,/deep/在vue 3.0会报错)

        >>>只用于css,(scss,less,scss无法解析>>>)