vue|vue-router 传参（query传参、params传参） vue|web

文章目录

一、query传参
- 1、创建文件
- 2、文件配置（按顺序展示，非一次性展示）
- 3、运行
二、params传参
- 1、文件配置
- 2、运行
- 3、传多个数据
- 4、params对象方式传参

一、query传参（query传参演示在二级路由基础上演示，二级路由参考：vue-router 路由创建、路由嵌套、二级路由）
1、创建文件创建出以下文件（新创建文件为Desc.vue文件）（二级路由文件下载链接：链接：https://pan.baidu.com/s/1Tny4Erp6iPCsrmrIX_QRCA
提取码：3524）

文章图片

2、文件配置（按顺序展示，非一次性展示） 【vue|vue-router 传参（query传参、params传参）】1、Desc.vue 文件

> export default { name: 'DESC' } >

2、index.js 写入路由

import Vue from 'vue' import VueRouter from 'vue-router' import HomeView from '../views/HomeView.vue' import Course from '../views/Course.vue' import Desc from '../views/Desc.vue'Vue.use(VueRouter)const routes = [ { path: '/', name: 'Home', component: HomeView }, { path: '/course', name: 'Course', component: Course, // 二级路由 children: [{ path: '/desc', component: Desc }] } ]const router = new VueRouter({ routes })export default router

3、Course.vue 写入数据

> // 导出 export default { name: 'CourseItem', data () { return { courseList: [{ id: 1, name: 'HTML' }, { id: 2, name: 'CSS' }, { id: 3, name: 'JQUERY' }] } } } ="scoped"> /* scoped 作用于本页面 */ nav { padding: 30px; }nav a { font-weight: bold; color: #d66363; }nav a.router-link-exact-active { color: #00ff8c; }li { list-style: none; display:inline; }

4、Couser.vue 拿到数据
两种方式

5、Desc.vue 获取数据
部分修改

> export default { name: 'DESC' } >

文章图片

3、运行

文章图片

文章图片

二、params传参在query的基础上修改
1、文件配置 1、Course.vue

2、index.js

const routes = [ { path: '/', name: 'Home', component: HomeView }, { path: '/course', name: 'Course', component: Course, // 二级路由 children: [{ path: '/desc/:name', component: Desc }] } ]

3、Desc.vue

2、运行

文章图片

3、传多个数据 1、Course.vue

{{c.name}} |

2、index.js

{ path: '/desc/:name/:id', component: Desc }

3、Desc.vue

4、运行

文章图片

4、params对象方式传参 1、Course.vue
params对象方式传参不能使用path

2、index.js
params对象传参要用name识别路径

const routes = [ { path: '/', name: 'Home', component: HomeView }, { path: '/course', name: 'Course', component: Course, // 二级路由 children: [{ name: 'Desc', path: '/desc/:name', component: Desc }] } ]

3、Desc.vue

4、运行