Four ways of vue-router to pass parameters

1.router-link

1.不带参数
<router-link :to="{name:'home'}" />
<router-link :to="{path:'/home'}" />
//router-link中链接如果是'/'开始就是从跟路由开始，如果开始不带'/',则从当前路由开始
2.带参数
<router-link :to="{name:'home',params:{id:1}}" />
//params传参数（类似post）
//路由里面配置path:"/home/:id" 或者 path:"/home:id"
//冒号用params取参，用"/:"拼接
//不配置path，刷新页面id会保留
//html取参 $route.params.id
//script 取参 this.$route.params.id 
//params是path的一部分，所以params和name一起使用，不能和path一起使用

<router-link :to="{name:'home',query:{id:1}}" /> 或者
<router-link :to="{path:'home',query:{id:1}}" /> 
//query传参数（类似get，url后面会显示参数）
//路由可不配置   因为带参数了
//html 取参 $route.query.id
// script 取参 this.$route.query.id

2.this.$router.push() is called in the function

1.不带参数
this.$router.push('/home')
this.$router.push({
    
    name:'home'})
this.$router.push({
    
    path:'/home'})
2.带参数（query传参和params传参以及两者区别）
//query传参 三种写法
第一种：this.$router.push({
    
    name:'home',query:{
    
    id:1,age:2}})
//基于name配置路由
{
    
    
path: '/hhhhhhh', //这里可以任意
name: 'home', //这里必须是home
component: Home
}
http://localhost:8080/#/hhhhhhh?id=1&age=2
第二种：this.$router.push({
    
    path:'/home',query:{
    
    id:1,age:2}}) 
//基于path配置路由
{
    
    
path: '/home', //这里必须是home
name: 'hhhhhhhh', //这里任意
component: Home
}
url:http://localhost:8080/#/home?id=1234&age=12
第三种：this.$router.push(`/home?id=1`);
//query是name和path都可以用
//html取参   $route.query.id 
//script 取参 this.$route.query.id 

//params传参
this.$router.push({
    
    name:'home',params:{
    
    id:1,age:2}})  //params只能和name一起用哟
//路由配置：
{
    
    
	path:'/home/:id/:age',
	name:'W',
	component:W
}
//路由配置path:"/home/:id" 或者path:"/home:id",
//不配置path，第一次可以请求实现跳转，也能通过this.$router.params.id获取传过来的值，但是刷新页面id会消失  params比query严格
//配置path，刷新页面id会保留
//html 取参 $route.params.id
//script 取参 this.$router.params.id 
query和params的区别
query类似get，跳转之后页面url后面会拼接参数，类似?id=1，非重要性可以这样传，密码之类用params
params类似post，跳转之后页面url后面不会拼接参数，但是刷新页面id会消失

3.this.$router.replace() (same as above, push)

4.this.$router.go(n)
jump forward or backward n pages, n can be positive or negative integer

the difference:

• this.$router.push
  jumps to the specified url path, and adds a record to the history stack, click Back to return to the previous page
• this.$router.replace
  jumps to the specified url path, but there will be no records in the history stack, and clicking Return will jump to the previous page (that is, directly replace the current page)
• this.$router.go(n)
  Jump forward or backward n pages, n can be a positive integer or a negative integer.
  I have summed up some more to facilitate subsequent searches. Take a note.
  The article comes from: https://blog .csdn.net/Leon_940002463/article/details/102696495?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t 0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param