Vue路由携带参数跳转

// 路由配置  第一种方式
const routes = [  
  {  
    path: '/路径/:index', // 定义带有动态段的路由路径    /:index是动态参数
    name: '...', // 命名路由  
    component: YourComponent  
  }  
];  
  
// 在组件中跳转路由并传递参数  
this.$router.push({  
  name: '...', // 使用路由名称进行跳转  
  params: { index: 1 } // 传递参数  
});

//接收方法


this.参数 = this.$route.params.参数名1; // 获取传递的参数name的值  
    this.参数2 = this.$route.params.参数2; // 获取传递的参数fn的值  
    console.log(this.参数, this.参数2); // 输出传递的参数的值到控制台  

-------------------------------------------------------------------------------------------
第二种方式

 //历史票价路由配置
  {
    path:'/.../...',
    name:'...',
    component: resolve => import("../views/.../.....vue"),
    meta: { title: "历史票价" },
  },

//跳转方法
 htisory(obj) {
            this.$router.push({  
                path: '/需要跳转的路径',  
                query: {  
                    name: 参数1,  
                    id: 参数2,  
                   
                }  
                });
        },


//接收方法
	this.参数 = this.$route.query.参数名1; // 获取传递的参数name的值  
    this.参数2 = this.$route.query.参数2; // 获取传递的参数fn的值  
    console.log(this.参数, this.参数2); // 输出传递的参数的值到控制台  

第一种方式需要在配置路由的时候配置动态参数 :index/:id
在传递的时候需要使用this.$router.push({ name: 'historyPrice', // 使用路由名称进行跳转 params: { index: 1 } // 传递参数 });,name指定的是route中的那么属性,params是传递的参数,传递的参数会显示的展示在url上,接收方式this.参数 = this.$route.params.参数名1; // 获取传递的参数name的值 ,要从params中取参数

第二种方式不需要在路由中配置参数,参数path直接写路由跳转的路径即可,请求参数为query

htisory(obj) {
            this.$router.push({  
                path: '/需要跳转的路径',  
                query: {  
                    name: 参数1,  
                    id: 参数2,  
                   
                }  
                });
        },

this.参数 = this.$route.query.参数名1; // 获取传递的参数name的值  
    this.参数2 = this.$route.query.参数2; // 获取传递的参数fn的值  
    console.log(this.参数, this.参数2); // 输出传递的参数的值到控制台