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

1. 标签形式路由跳转

1.1 参数传递的两种方式

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

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

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

// 方式一获取参数

this.$route.query.参数名

// 方式二获取参数

this.$route.params.参数名

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

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.参数名