路由传参的两种方式

路由传参的两种方式：

第一种方式：路径匹配

举例：

路由 index.js:

 // 会员等级
          path: '/member/level/:id',
          name: 'MemberLevel',
          component: MemberLevel

页面:

<router-link to="/member/level/1">会员等级</router-link>

组件页面:

<div>会员等级 ID= {{ $route.params.id }}</div>

第二种方式: props

路由 index.js:

{
  // 会员等级
  path: '/member/level/:id',
  name: 'MemberLevel',
  component: MemberLevel,
  props: true
}

组件页面：

<template>
  <div>会员等级 ID= {{ id }}</div>
</template>

<script>
export default {
  props: ['id'],
  name: 'MemberLevel'
}
</script>

主页面：

<router-link :to="{ name: 'MemberLevel', params: { id: 3 } }"

效果：