先正常添加一个user 用户路由及界面

  1. const User = () => import('../views/User.vue')

在home children下添加user的子路由

  1. {
  2.         path: 'user',    //url
  3.         name: 'user', //路由的名字
  4.         component: User //渲染组件的名字
  5.       }

views/User.vue

  1. <template>
  2.   <div>
  3.       user用户页面
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  10. }
  11. </script>
  13. <style>
  15. </style>

image.png

第一种传参方法：url传参

Home.vue 的router-link配置

  1.       <ul>
  2.         <li v-for="(item, index) in 5" :key="index">
  3.           <router-link :to="'/home/user/'+(index+1)">我是用户{{ index + 1 }}</router-link>
  4.         </li>
  5.       </ul>

router/index.js文件home children下添加user的子路由

  1.       {
  2.         path: 'user/:id',    //id匹配/user/后面的东西
  3.         name: 'user', //路由的名字
  4.         component: User //渲染组件的名字
  5.       }

views/User.vue

  1. <template>
  2.   <div>
  3.       <h1>user用户页面</h1>
  4.       <p>接受过来的参数是{{ this.$route.params.id }}</p>
  5.   </div>
  6. </template>
  8. <script>
  9. export default {
  11. }
  12. </script>
  14. <style>
  16. </style>

效果：

url 已path的方式显示了传参的内容

2.gif

第二种传参方法：声明式params传参

Home.vue 的router-link配置

to=一个对象，name参数值的是route的path的值，params是一个对象，里面声明了传了一个参数id

  1.       <ul>
  2.         <li v-for="(item, index) in 5" :key="index">
  3.           <router-link :to="{
  4.             name: 'user',
  5.             params: {
  6.               id: '声明传params参数' + (index + 1)
  7.             }
  8.           }">我是用户{{ index + 1 }}</router-link>
  9.         </li>
  10.       </ul>

router/index.js文件home children下添加user的子路由

  1.       {
  2.         path: 'user',    //id匹配/user/后面的东西
  3.         name: 'user', //路由的名字
  4.         component: User //渲染组件的名字
  5.       }

views/User.vue

  1. <template>
  2.   <div>
  3.       <h1>user用户页面</h1>
  4.       <p>接受过来的参数是{{ this.$route.params.id }}</p>
  5.   </div>
  6. </template>
  8. <script>
  9. export default {
  11. }
  12. </script>
  14. <style>
  16. </style>

效果：

url隐蔽了传参的内容
刷新url，传过来的参数会丢失
2.gif

第三种传参方法：声明式query传参

Home.vue 的router-link配置

to=一个对象，name参数值的是route的path的值，params是一个对象，里面声明了传了一个参数id

      <ul>
        <li v-for="(item, index) in 5" :key="index">
          <router-link :to="{
            name: 'user',
            query: {
              id: '声明传query参数' + (index + 1)
            }
          }">我是用户{{ index + 1 }}</router-link>
        </li>
      </ul>

这里可以去掉name参数，加上path：/home/user,也是可以的。

<router-link :to="{
            path: '/home/user',
            query: {
              id: '声明传参数' + (index + 1)
            }
          }">我是用户{{ index + 1 }}</router-link>

router/index.js文件home children下添加user的子路由

      {
        path: 'user',    //id匹配/user/后面的东西
        name: 'user', //路由的名字
        component: User //渲染组件的名字
      }

views/User.vue

<template>
  <div>
      <h1>user用户页面</h1>
      <p>接受过来的参数是{{ this.$route.query.id }}</p>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

效果:

url可以看到传参的内容
image.png

另外一种编程式传参数

Home.vue文件内容

li标签绑定了一个函数，tolink，给函数传递参数，tolink函数再使用this.$router.push方法传递函数。

<template>
  <div class="home">

    <img alt="Vue logo" src="../assets/logo.png">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <div id="nav">
      <router-link to="/home">Home</router-link> |
      <router-link to="/home/about">About</router-link>|
      <router-link to="/home/wk">wk</router-link>
      <ul>
        <li @click="tolink(index+1)" v-for="(item, index) in 5" :key="index">
          我是用户{{ index + 1 }}
        </li>
      </ul>


    </div>

    <span>我是home.vue,下面home-view</span>
    <router-view></router-view>


  </div>

</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  methods: {
    tolink(id){
      this.$router.push({
        name:"user",
        params:{
          id:id
        }
      })
    }
  },
  data(){
    return{

    }
  }
}
</script>

router/index.js文件home children下添加user的子路由

      {
        path: 'user',    //id匹配/user/后面的东西
        name: 'user', //路由的名字
        component: User //渲染组件的名字
      }

views/User.vue

<template>
  <div>
      <h1>user用户页面</h1>
      <p>接受过来的参数是{{ this.$route.params.id }}</p>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

效果：

2.gif

总结：

query可以和path配对
query可以和name配对
parms不可以和path配对
parms可以只可以与name配对