vue-router 传参:query传参、params传参


一、query传参

(query传参演示在二级路由基础上演示,二级路由参考:vue-router 路由创建、路由嵌套、二级路由

1、创建文件

创建出以下文件(新创建文件为Desc.vue文件)(二级路由文件下载链接:链接:https://pan.baidu.com/s/1Tny4Erp6iPCsrmrIX_QRCA
提取码:3524)
在这里插入图片描述

2、文件配置(按顺序展示,非一次性展示)

1、Desc.vue 文件

<template>
  <h3>详情页面</h3>
</template>

<script>
export default {
  name: 'DESC'
}
</script>

<style>
</style>

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 写入数据

<template>
  <nav>
    <ul>
      <li v-for="c in courseList" :key="c.id">
          <router-link to="/desc">{{c.name}}</router-link> |
      </li>
    </ul>
    <hr />
    <router-view />
  </nav>
</template>

<script>
// 导出
export default {
  name: 'CourseItem',
  data () {
    return {
      courseList: [{
        id: 1,
        name: 'HTML'
      },
      {
        id: 2,
        name: 'CSS'
      },
      {
        id: 3,
        name: 'JQUERY'
      }]
    }
  }
}
</script>

<!-- scoped 样式作用域   lang 样式(css less sass) -->
<style scoped="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;
}
</style>

4、Couser.vue 拿到数据

两种方式

<template>
  <nav>
    <ul>
          <li v-for="c in courseList" :key="c.id">
          <!-- query 传参 方式一 -->
          <!-- 使用v-bind 模板字符串拿到c.name -->
          <!-- <router-link :to="`/desc?name=${c.name}`">{{c.name}}</router-link> | -->
          <!-- query 传参 方式二 以对象方式传参 -->
          <router-link :to="{
                path:'/desc',
                query:{
                    name:c.name
                }
                }">{{c.name}}</router-link> |
      </li>
    </ul>
    <hr />
    <router-view />
  </nav>
</template>

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

<template>
<!-- {{this.$route}}拿到index.js路由对象 -->
  <h3>{{this.$route.query.name}}详情页面</h3>
</template>

<script>
export default {
  name: 'DESC'
}
</script>

<style>
</style>

在这里插入图片描述

3、运行

在这里插入图片描述
在这里插入图片描述

二、params传参

在query的基础上修改

1、文件配置

1、Course.vue

<template>
  <nav>
    <ul>
      <li v-for="c in courseList" :key="c.id">
          <!-- params 传参 方式一 -->
          <router-link :to="`/desc/${c.name}`">{{c.name}}</router-link> |
      </li>
    </ul>
    <hr />
    <router-view />
  </nav>
</template>

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

<template>
<!-- {{this.$route}}拿到index.js路由对象 -->
  <h3>{{this.$route.params.name}}详情页面</h3>
</template>

2、运行

在这里插入图片描述

3、传多个数据

1、Course.vue

<router-link :to="`/desc/${c.name}/${c.id}`">{{c.name}}</router-link> |

2、index.js

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

3、Desc.vue

<template>
  <div>
    <!-- {{this.$route}}拿到index.js路由对象 -->
    <h3>{{this.$route.params.name}}详情页面</h3>
    <h3>ID:{{this.$route.params.id}}</h3>
  </div>
</template>

4、运行
在这里插入图片描述

4、params对象方式传参

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

<template>
  <nav>
    <ul>
      <li v-for="c in courseList" :key="c.id">
          <!-- params 传参 方式二 以对象方式传参 -->
          <!-- 对象方式不能使用path,要用路由名称 -->
          <router-link :to="{
            name: 'Desc',
            params:{
                name:c.name,
                id:c.id
            }
            }">{{c.name}}</router-link> |
      </li>
    </ul>
    <hr />
    <router-view />
  </nav>
</template>

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

<template>
<!-- {{this.$route}}拿到index.js路由对象 -->
  <h3>{{this.$route.params.name}}详情页面</h3>
</template>

4、运行

  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在使用 Vue.js 进行前端开发时,经常需要进行页面的跳转和参数的传递。Vue.js 提供了一个官方的路由插件 vue-router,可以方便地进行页面的跳转和参数的传递。 vue-router 支持两种方式进行参数传递:paramsqueryparams 传参params 是路由路径中的占位符,可以通过 $route.params 来获取传递的参数。使用 params 传参时,需要在定义路由规则时使用冒号将参数名包裹起来,例如: ```javascript const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }) ``` 在上面的例子中,定义了一个 /user/:id 的路由规则,其中 :id 是一个占位符,可以接受任意的参数。 在组件中访问传递的参数时,可以通过 $route.params.id 来获取: ```javascript const User = { template: '<div>User {{ $route.params.id }}</div>' } ``` 在使用 params 传参时需要注意,如果在同一个路由规则下,参数发生变化时不会触发组件的生命周期钩子函数,需要通过 watch 监听 $route 对象来实现: ```javascript const User = { template: '<div>User {{ id }}</div>', watch: { '$route.params.id' (to, from) { this.id = to } }, data () { return { id: '' } } } ``` query 传参query 是通过 URL 的查询字符串传递参数,可以通过 $route.query 来获取传递的参数。使用 query 传参时,需要在定义路由规则时使用问号将参数名包裹起来,例如: ```javascript const router = new VueRouter({ routes: [ { path: '/user', component: User } ] }) ``` 在组件中访问传递的参数时,可以通过 $route.query.id 来获取: ```javascript const User = { template: '<div>User {{ $route.query.id }}</div>' } ``` 在使用 query 传参时需要注意,参数的值会被转换为字符串类型,如果需要传递数组或对象等复杂数据类型,需要将其转换为 JSON 字符串。在组件中获取参数时需要使用 JSON.parse 解析字符串。例如: ```javascript // 在路由中传递数组参数 router.push({ path: '/user', query: { ids: JSON.stringify([1, 2, 3]) } }) // 在组件中获取数组参数 const User = { template: '<div>User {{ ids }}</div>', computed: { ids () { return JSON.parse(this.$route.query.ids) } } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李子木、

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值