Vue 爬坑

Vue 爬坑

判断当前页面。
如果你还记得在注册route的时候(一般地址是src/router/index.js),一般参数有3个:path、name、component,那你就可以通过$route.name来判断当前页面了,毕竟vue项目每次切换的时候,route都会变。

img的src属性绑定变量

然后,如果你传入的值是本地的图片,那你可能还是get不到图片,此时就要用到require()

如果你用以上方法还是报错,那你也可以把require()放到data的return中。

背景图片,其他样式也是一样的

只能有一个root element

如果这样写,应该是没有报错的,但是不代表合适;

这样写应该就有报错了;

所以这样写才是最合适的,用一个div把内部元素全部包起来。

二级路由和三级路由
这个坑,让我爬了好久,毕竟初学,根本没想到会是三级路由出了问题,最后还是偶然(天意)看到了一个三级路由的词,后面就迎刃而解了。

如上图所示,dashboard是一级,robot是二级,welcome是三级,上图的写法是正确的,全场只需要一个主要的router-view就足够调用content了。
如果你在children下又写了一个children,当然你可能认为这样的写法更优秀,其实一开始我也是这样认为的,然后自己就进坑了。
如果是这样的想法,那么的你会发现就算你访问welcome,页面也只会显示robot的内容;然后你就百度到了需要在robot页面再加一个router-view,然后你又发现访问welcome,robot上的内容还在。当然不能说这样是错的,说不定就有这样的需求。所以还是一个children算了,就这样了。如果有这样的需求再写两个children。

当然我还找到了另外一个写法,我只大概试了一下,没仔细研究,不过我觉得可以。
https://github.com/vuejs/vue-router/issues/1507

vue router
vue项目中,可以使用进行页面跳转,等同于调用 router.push(…),js中页面跳转可以使用this.$router.push

可以使用router.push({ name: 'user', params: { userId: 123 }})的方法,跳转到指定页面,隐藏页面信息,通过params传递指定信息,其中name为注册路由时的name;在跳转页面通过this.$route.params来获取传递来的信息。

body样式
今天遇到的问题是,在单页vue文件中写的有关body的样式不生效,于是用了以下方法,可以针对某个页面,给body加class,离开时删除该class;然后把样式写在全局css文件中。

自定义alias
我们在一个vue文件引入别的文件,一般都是用import,后面加上相对路径;也可以用@开头,@代表从src开始查路径;那么为什么@代表从src开始?

其实这个是默认定义的值,在build/webpack.base.conf这个文件里面设置了@具体指的是什么,所以如果你有别的需求,也可以自定义,当然了,讲道理vue项目的文件基本都在src目录下,如果你还需要定义别的配置,首先反省一下是不是自己的层级结构不够合理。。。

Vue的检测限制
前两天用vue和vant写购物车时遇到一个问题,修改购物车的产品数量时,当在van-checkbox上用了label-disabled属性之后,dom不会随着数量的变化而变化;后来跑到社区求助才找到了问题,解决的方法就是获取新的数量之后,需要替换掉整个产品的数据而不是只更新产品下的数据中的num,感觉和后面写的vue watch的feel差不多。具体地址

发表评论

电子邮件地址不会被公开。