vue-router传参的四种方式

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() 在函数里调用

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() （用法同上，push）

4.this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数

区别：

• this.$router.push
  跳转到指定url路径，并向history栈中添加一个记录，点击后退会返回上一个页面
• this.$router.replace
  跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面（就是直接替换了当前页面）
• this.$router.go(n)
  向前或者向后跳转n个页面，n可为正整数或负整数
  自己又总结了一些，方便后续查找，做个笔记
  文章来源于：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_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param