vue-router 页面跳转及传参的几种方式

1. 标签形式路由跳转

<router-link to="/home/goodsinfo"></router-link>

    1.1 参数传递的两种方式

<!-- 方式一 -->
<router-link :to="'/home/goodsinfo?参数名='+传递参数"></router-link>

<!-- 方式二 -->
<router-link :to="'/home/goodsinfo/'+传递参数"></router-link>

   注意：方式二，需要在路由中配置（router.js）

{ path: "/home/goodsinfo/:参数名", component: goodsinfo }

   1.2 跳转页对应的获取参数方式

// 方式一获取参数
this.$route.query.参数名

// 方式二获取参数
this.$route.params.参数名

 

2. 编程式路由跳转的4种方式

<div @click="toDetails(参数值)"></div>

    2.1 methods中定义方法

toDetails(id) {
    // 方式一  字符串
    this.$router.push('/home/goodsinfo?参数名='+参数值)
    // 方式二  对象
    this.$router.push({ path: '/home/goodsinfo?参数名='+参数值 })
    // 方式三  命名的路由
    this.$router.push({ name: 'goodsinfo', params: { 参数名: 参数值 }})
    // 方式四  带查询参数
    this.$router.push({ path: '/home/goodsinfo',query: { 参数名: 参数值 } })
} 

  注意：其中方式三需要在路由中配置name（router.js）

{ path: "/home/goodsinfo/", component: goodsinfo, name: 'goodsinfo' }    // name用于命名路由跳转

2.2 跳转页对应的获取参数方式

// 方式一、方式二、方式四 获取参数
this.$route.query.参数名

// 方式三 获取参数
this.$route.params.参数名