VUE2的路由传参方式

• 方式一： 利用 ? 传递参数，保存在 this.$route.query 属性里

• 方式二：利用  /xx/xx ， 简化前提是需要到 路由中进行参数配置，保存在 this.$route.params 属性里
• 方式三：让组件利用 props属性 自动解构出路由参数

代码展示：

app.vue

<template>
  <div>
    <!-- 路由传参 -->
    <!-- 传参写法1: 借鉴原生的URL参数格式 利用 ? 传递参数 -->
    <router-link to="/show?skill=卖萌&age=19">show1</router-link>
    <!-- 写法2: 简化前提是 需要到路由中进行参数配置 -->
    <router-link to="/show/卖萌/19">show2</router-link>
    <router-link to="/show">show3</router-link>
    <router-view />
    <hr />
    <hello-world />
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped></style>

show.vue

<template>
  <div>
    <h1>我是步步, 我会{{ $route.query.skill }}</h1>
    <h2>今年{{ $route.query.age }}</h2>
    <hr />
    <div>{{ $route.params.skill }}, {{ $route.params.age }}</div>
    <!-- 当路由中 开启 props 解构功能后 -->
    <div>{{ skill }}, {{ age }}</div>
  </div>
</template>

<script>
export default {
  // 用于自定义属性, 接受传递的参数
  // 如果路由开启了 属性解构模式, 则props同时具备了自动解构路由参数的功能
  props: ['skill', 'age'],
  mounted() {
    console.log(this) //找其中的 $route 属性
    // ?方式传递的参数, 保存在: this.$route.query 属性里
    // 如果是 /show/xx/xx 方式传递的参数
    // 则存储在 this.$route.params 里
  },
}
</script>

<style lang="scss" scoped></style>

路由index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// routes: 用于存储 路径 和 组件间的对应关系
const routes = [
  {
    // localhost:8080/show
    // 用 : 作为标识, 来规定参数的名字
    path: '/show/:skill/:age',
    // 让组件利用 props属性, 自动解构出路由参数
    props: true, //true代表开启此功能
    name: 'show',
    component: () => import('../views/Show.vue'),
  },

  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

export default router