this.$route.query和this.$route.params的正确使用

1.this.$route.query的使用

(1)、传参数：

this.$router.push({
         path: '/checkout',
         query:{
               productId:id,
          }
}）

(2)、获取参数：

this.$route.query.productId

(3)、在url中形式（url中带参数）

http://xxx/#/goodsDetails?productId=150642571432849

(4)、页面之间用路由跳转传参时，刷新跳转后传参的页面，数据还会显示存在（项目中遇到此问题）

2.this.$route.params的使用

（1）、传参数：

// An highlighted block
this.$router.push({
         name: 'checkout',
         params:{
               productId:id,
          }
}）;

（2）、获取参数：

// An highlighted block
this.$route.params.productId

（3）、在url中形式（url中不带参数）

// An highlighted block
http://172.19.186.224:8080/#/checkout

3 this.$router与this.$route区别与联系

$router : 是路由操作对象，只写对象

$route : 路由信息对象，只读对象

1,、this.$router是Vue Router的实例，包含了一些路由的跳转方法，钩子函数等.

想要导航到不同的url，则使用this.$router.push()  $router对象是全局路由的实例，是router构造方法的实例

路由实例方法:

• push(): push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。
• go(): 页面路由跳转 前进或者后退
• replace(): push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面， 不会向 history 栈添加一个新的记录。 一般使用replace来做404页面

2、this.$route对象表示当前的路由信息，包含了当前url解析得到的信息，包含当前的路径、参数、query对象等