Vue Router

一、Vue Router的常用方法主要包括以下几种：

1. push方法：用于导航到不同的路由。这个方法会向history栈添加一个新的记录。例如，this.$router.push('/home')会导航到路径为'/home'的路由。如果路由配置中包含了参数，也可以使用push方法传递参数，如this.$router.push({name:'home', params:{id:'1'}})。
2. replace方法：这个方法也是用于导航，但它不会向history栈添加新的记录，而是替换掉当前的记录。因此，使用replace方法后，用户不能通过浏览器的后退按钮返回前一个页面。
3. go方法：用于在浏览器的history中前进或后退多少步。参数为正数时表示前进，为负数时表示后退。例如，this.$router.go(-1)表示后退一步。
4. back方法：相当于go(-1)，用于后退到上一个路由。
5. forward方法：相当于go(1)，用于前进到下一个路由。

二、 this.$route.query.xx

在Vue Router中，query是指URL中?后面的部分，用于传递参数。这种传参方式通常用于点击不同的区域展示同一个组件，但组件的数据不同的情况。

你可以在路由跳转时通过query方式传递参数，例如：

<router-link :to="`/home/message/detail?id=001&title=消息1`">跳转到详情页</router-link>

或者，你也可以使用对象形式进行传参：

<router-link :to="{ path: '/home/message/detail', query: { id: '001', title: '消息1' } }">跳转到详情页</router-link>

在目标组件中，你可以通过$route.query来访问这些参数：

export default {  
  mounted() {  
    console.log(this.$route.query.id);  // 输出：001  
    console.log(this.$route.query.title);  // 输出：消息1  
  }  
}