1. 必须使用 name 匹配路由，params 传参 （不可使用 path 匹配路由）

特点：参数保密，刷新页面丢失参数

1. 在组件中

this.$router.push({
  name: 'group2',
  params: {
    id: '101'
  }
})

或者

<router-link :to="{ name: 'group2', params: { id: 101 }}">首页</router-link>

2. 在目标组件获取参数

this.paramsId = this.$route.params.id

2. 使用 path或者name 匹配路由，query 传参

特点：参数在路径上显示，刷新页面不丢失参数

1. 在组件中

this.$router.push({
  path: '/group2/page1',
  query: {
    id: '201'
  }
})

或者

<router-link :to="{ path: '/group2/page1',query: {id: '201'}}">内容区</router-link>

2. 在目标组件获取参数

this.queryId = this.$route.query.id

3. 必须使用 path 匹配路由，路径/参数 传参 , 同时配置路由对象 路径/:参数名

特点：参数在路径上显示，刷新页面不丢失参数

1. 在组件中

this.$router.push({
  path: '/group2/page2/青龙',
})

或者

<router-link :to="{ path: '/group2/page2/青龙'">内容区</router-link>

2. 在路由文件中，追加 /:name

{
  path: "/group2/page2/:name",
  name: "group2page2",
  component: () => import("@/views/group2/page2")
}

3. 在目标组件获取参数

this.paramsName = this.$route.params.name

4.使用 name 匹配路由， props 传参，适合整合参数

1. 在组件中

this.$router.push({
  name: 'group2',
  params: {
    id: '666'
  },
  query: {
    queId: '999'
  }
})

或者

<router-link :to="{ name: 'group2', params: { id: '666' },query: {queId: '999'}}">首页</router-link>

2. 在路由文件中 配置props

$route.params 参数，刷新页面丢失，不在路径上显示
$route.query 参数，刷新页面不丢失，在路径上显示
固定参数，刷新页面不丢失，不在路径上显示

{
  path: "/",
  name: "group2",
  component: () => import("@/views/group2/index"),
  props($route) {
    return {
      id: $route.params.id,
      queId: $route.query.queId,
      other: 1000,
    }
  }
},

3. 在目标组件获取参数，此参数直接通过 this 访问，比如 this.id

props: ['id','other','queId'],

5. 跳转无回退历史

this.$router.replace({
    name: "group2page2"
});

6. 历史回退和前进

this.$router.go(-1);
this.$router.go(1);