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无法解析>>>)
巴特西

Vue问题

vue问题

最新文章

热门文章
