vue-router的query和params的区别/若刷新当前页面params对象里面数据会消失，而query不会

主要讲3点

1.query和params使用区别（重点）

模拟一下路由，假设已经在router.js文件里定义path=‘aaa/index2/’和name='index2'

query使用

//当前页面，index1.vue
methods:{
    //一个点击按钮，事件
    btnClick () {
        this.$router.push({
            path:'aaa/index2',
            //如果不想用path的话，可以用name代替（前提是要在router.js定义），下面这行代码
            //name:'idnex2'
            query：{id:10086,name:'zhangsan'}
        })
    }
}

//这个是从index1.vue过来的页面，叫index2.vue
mounted(){//vue的生命周期函数
    const {id , name} = this.$router.query//把query对象里面的id和name拿出来
    //一些异步操作
    async this.asdfasdf(id，name)
}

params使用

//当前页面，index1.vue
methods:{
    //一个点击按钮，事件
    btnClick () {
        this.$router.push({
            name:'idnex2'
            params：{id:10086,name:'zhangsan'}
        })
    }
}

//这个是从index1.vue过来的页面，叫index2.vue
mounted(){//vue的生命周期函数
    const {id , name} = this.$router.params//把params对象里面的id和name拿出来
    //一些异步操作
    async this.asdfasdf(id，name)
}

总结：

从query拿到的数据（即id和name）会在url上显示
        如：www.asdf.com/aaa/index2?id=10086&name=zhangsan
从params拿到的数据（即id和name)可以在url上显示，也可以不显示
        如：www.asdf.com/aaa/index2/10086/zhangsan

若使用params在url上带数据，则需要把router.js

path=‘aaa/index2’改成

path='aaa/index/:id/:name' (属性名要对应)

若使用params在url上不带数据，直接这样，什么都不用改path=‘aaa/index2’

2.若刷新当前页面params对象里面数据会消失，而query不会，为什么呢？（个人理解）

parmas

parmas是在vue中，刷新当前页面相当于重新加载vue，那么parmas对象重新加载当然是没数据（因为第一次进来index2页面的时候，数据是从index1里过来的）

query

刷新当前页面url是不变的，queyr对象里存的数据也不会刷新，$router.query.id就能直接拿到

3.query和params的描述（官方定义）

• $route.params

  • 类型: Object

    一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。

• $route.query

  • 类型: Object

    一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象