Vue中碰见的问题 （一）

路由跳转传值

//跳转页面获取参实
 mounted(){
		console.log(this.$route.query)
	}
	
//传值页面加入路由跳转	
methods: {
			edit(num) {
				this.$router.push({path:"addgoods",query:{num:num}})
			}
		}

Vue中 watch 监听路由变化

当路由不是从一个页面跳转到另一个页面，而仅仅是路由的改变时，我们要 实现利用同一个组件适配两个路由，此时可以用watch监听路由的改变，从而达到渲染不同的效果

watch:{
			  $route: {
    			handler: function(val, oldVal){
				  //路由改变执行的函数
    			},
    		//深度观察监听
    		deep: true
			}
	}

关于Vue中图片的src绑定

//栗子1 在 Vue开发中直接引用图片 这样是可以显示的
<img src="../assets/bg.png"/>


//栗子2 在Vue中绑定 src,这样无法显示出图片
<img :src=picimg />
data：{
    picimg: "../assets/bg.png"
}

看这个错误代码，我们发现，网页把根域名作为相对路径的根目录了，然而我们文件的路径是相对于项目文件的根目录的，当然就找不到了。

那么，到底应该怎么加载本地图片呢？回头看vue-cli的文件结构，发现其中有一个叫做static的文件夹，尝试将logo.png放入这个文件夹，然后修改picimg：

//栗子3  图片可以显示出来
data：{
    picimg: "../../static/bg.png"
}

原来，之前的目录结构是有问题的，图片一类的静态文件，应该放在这个static文件夹下，这个文件夹下的文件（夹）会按照原本的结构放在网站根目录下。这时我们再去使用/static绝对路径，就可以访问这些静态文件了。

另外，如果说想在不调整目录结构的情况下读取本地图片，还有一个方法，那就是直接传入图片编码。即：

//栗子4 
picimg: require( "../assets/bg.png")

Vue input框上传图片

<input type="file" @change="uploadImg" accept="image/*">
 <input type="file" @change = "uploadImg($event)" accept="image/*">

uploadImg (e) {
                console.log(e)
            let _this = this;
            console.log(_this)
            let files = e.target.files[0];
            if (!e || !window.FileReader) return; // 看支持不支持FileReader
            let reader = new FileReader();
            reader.readAsDataURL(files); // 这里是最关键的一步，转换就在这里
            reader.onloadend = function () {
                _this.src = this.result;
                _this.isShow = true;
            }

最后得到的_this.src为将图片转化为base64 编码的值

Vue中引入外部css

局部引入

<style scoped>
  @import '../assets/iconfont/iconfont.css';这个分号一定要写，要不会报错
</style>

全局引入

将外部的css文件放到style文件下，引入外部文件只需在main.js文件中

import './style/reset.css'

Vue中的 scoped域

总结一下scoped三条渲染规则

• 给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性

• 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式

• 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性