方法一：query 浏览器地址传递参数（页面刷新参数依然保留）

传递参数

this.$router.push({
path:'/info', //路径名
query:v //接收的参数
})

接收参数

this.$route.query

方法二：params （页面刷新参数就销毁）

传递参数

this.$router.push({
    name:'info',//路径name名
    params:v,//参数，多个参数可以用 { v,v2}
})

接收参数

this.$route.params

方法三：动态参数（在路由地址上面添加一个变量）

path: '/index/:a'

传递参数

<router-link to="/index/abc">首页</router-link>

接收参数

this.$route.params

接收到的参数：abc

附图：

一.localStorage：本地存储

提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留

将data保存到localStorage(本地存储)

方法一：

localStorage.setItem("data", data)

方法二:

localStorage.data=data

从localStorage中获取data数据

方法一：

localStorage.getItem("data")

方法二：

localStorage.data

二.sessionStorage：会话存储

提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除

将data保存到sessionStorage(会话存储)

方法一：

sessionStorage.setItem("data", data)

方法二:

sessionStorage.data = data

从localStorage中获取data数据

方法一：

sessionStorage.getItem("data")

方法二：

sessionStorage.data

三:一些常用的方法

1.清空存储中的所有key

localStorage.clear()

2.清空key中的参数

localStorage.removeItem("data")

功能：点击提交清空表单值

数据结构

            form: {
                name: "",//名称
                img: '',//图片地址
                price: 0,//单价
                num: 0,//数量
                sel: false,
            },

点击事件

this.list.push(this.form)

数据存储

list: []

当点击时候吧表单的信息添加到数据存储list数组，然后清空表单

this.form={}

清空之后没有考虑到有个复选框sel属性的状态，sel的状态是true，或者false，如果清空之后就为空，push到数组里面就没有这个属性，丢失了，

解决办法：提交之后给sel重新添加一个false状态

this.form.sel=false

功能需求：点击全选，选中所有复选框，选中之后，如果取消某一个复选框，全选状态自动取消。

1.全选按钮：实现思路，点击全选按钮，遍历所有列表复选框，吧全选按钮的状态（true|false）赋值给每一个列表复选框

代码如下：

<p class="qx">全选<input type="checkbox" @click="selectable" v-model="seall"></p>

<script>
export default {
    data() {
        return {
            seall: false,

        }
    },
}
</script>

点击事件

        selectable() {
            for (let key of this.list) {
                key.sel = !this.seall
            }
        },

2.功能需求二：全选之后如果取消列表某一个子选项全选状态自动取消，思路：给列表的复选框添加监听事件，然后遍历所有复选框，用every 如果都为真就返回true，有一个为假就返回false，在吧这个返回值赋给全选按钮。

代码如下

    watch: {
        list: {
            handler(val) {
                this.seall = val.every(v => v.sel === true);
            },
            deep: true
        }
    },

list是存储数据的数组，，控制复选框的是sel 通过true和false来控制复选框是否启用，结构如下：

list: [{name:"",img:"",price:"",num:"",sel:false}]

代码解释如下：

1. val 是 list 数组当前的值，也就是变化后的值
2. val.every(v => v.sel === true) 表示遍历 val 数组，对于数组中的每一个元素 v，都要判断其 sel 属性是否为 true
3. 如果 val 数组中每一个元素的 sel 属性都为 true，则返回的结果为 true，否则返回的结果为 false
4. 如果 val 中的所有元素的 sel 属性都为 true，则 this.seall 被赋值为 true，否则赋值为 false

1.methods和computed相同点都是可以进行一个计算

2.methods和computed不同点，computed比methods的运行效率高，methods每次被调用都会执行，但是computed只会执行一次，（只有当引用的值发送改变的时候才会执行，有缓存功能，提高了性能）

3.methods和computed用法不同，methods调用的时候需要加（），computed不需要，例如:

<p>总价{{a()}}</p> //methods
<p>总价{{a}}</p> //computed

1.在vue中style行内动态样式通过 :style来开启动态属性，style={样式名:值}控制如下：

<p :style="{ backgroundColor: cor, fontSize: size }">这是一段文本</p>

export default {
  data() {
    return {
      cor: 'yellow',
      size: '30px'
    }
  }
}

2.动态Class样式通过:class="{样式名:true|false}"来开启，通过真假控制是否启用样式，如下

<p :class="{ cors: bol, font: sz }">Class动态样式</p>

export default {
  data() {
    return {,
      bol: true,
      sz: true,
    }
  }
}

.cors {
  background-color: #4ce48e;
  line-height: 2;
}

.font {
  font-size: 2em;
}

进阶用法：例如：通过点击按钮控制样式是否显示，给元素绑定点击事件，点击之前给控制样式的值，取反可控制是否开启和显示，如下

<p @click="as" :class="{ cors: bol, font: sz }">Class动态样式</p>

  methods: {
    as() {
      this.sz = !this.sz
    }
  }

或者

<p @click="sz = !sz" :class="{ cors: bol, font: sz }">Class动态样式</p>

今天写vue项目遇到需要判断所有input框是否都填写了内容，用到了一个every具体如下：

判断每一个input是否都填写了内容

<input :type="v.type" :placeholder="v.ts" v-model="v.md" />

   title: [
                { name: '姓名', ts: '请输入姓名', md: '', type: 'text' },
                { name: '年龄', ts: '请输入年龄', md: '', type: 'number' },
                { name: '性别', ts: '请输入性别', md: '', type: 'text' },
                { name: '手机', ts: '请输入手机号', md: '', type: 'text' },
            ]

  is() {
            return this.title.every(v => v.md !== '');//判断所有input是否都填写完成，都不=空返回true，一个为空返回false
        }

再通过判断的返回值进行一个操作，

        add() {
            if (this.is) {
                this.list.push(this.title.map(v => v.md));
                // 提交之后清空input内容
                this.title.forEach(v => v.md = '');
            } else {
                alert('请填写所有信息');
            }
        },

方法一：

import logo from './assets/logo.png'

方法二：

data(){
    return{
        logo:require("./assets/logo.png")
    }
}