vue-router传参

params传值

前提

1. 照样我们先准备一个vue项目，并且安装好路由，并引用挂载好模板了，有新手还不太熟悉路由安装使用的朋友，建议先去看看上一篇关于vue-router创建使用的笔记，再来看传参。
2. 我们创建一个组件comA

<template>
  <section>
    <div>我是A组件</div>
  </section>
</template>

<script>
export default {
  name:"comA"
  
}
</script>

<style>

</style>

3. 在路由文件router.js中为组件comA配置路由

 {
    path:"/coma",
    name:"coma",
    component:import("../pages/comA.vue")
  }

4. 保存运行,访问路径可以看到渲染出了comA组件，
   

5. 接下来，我们需要在comA组件中写入传参

<template>
  <section>
    <div>我是A组件</div>
    <p>我的名字为：{{$route.params.username}}</p>
  </section>
</template>

6. 在app.vue页面中编写router-link，将要传的值写入：

<template>
  <div>
    <div>home</div>
    <!-- 路由跳转 -->
    <router-link to="/coma/小容A">comA</router-link>
    <!-- 路由出口 -->
    <router-view></router-view>
  </div>
</template>

7. 最后在路由中修改代码，因为params需要在传值前面加：

{
    path:"/coma/:username",
    name:"coma",
    component:import("../pages/comA.vue")
  }

8. 最后保存运行，在访问comA组件，可以看到一个comA链接，我们点击，可以看见我们传的值。
   
   点击之后：
   

9. 到这里。params传值就已经实现完成了。

query传值

1. 我们先创建一个组件comB

<template>
  <section>
    <div>我是B组件</div>
  </section>
</template>

<script>
export default {
  name:"comB"
  
}
</script>

<style>

</style>

2. 在路由文件router.js中为组件comB配置路由：

{
    path:"/comb",
    name:"comb",
    component:import("../pages/comB.vue")
  }

3. 然后保存，进行访问comb，会渲染出组件comB。
   
4. 在组件comB中，写出通过query

<template>
  <section>
    <div>我是B组件</div>
    <p>我的名字是：{{$route.query.username}}</p>
    <p>我喜欢：{{$route.query.like}}</p>
  </section>
</template>

5. 接下来在app.vue中编写router-link。

<template>
  <div>
    <div>home</div>
    <!-- 路由跳转 -->
    <!-- <router-link to="/coma/小容A">comA</router-link> -->
    <!-- 路由出口 -->

    <router-link to="/comb?username=小容B&like=sports"></router-link>
    <router-view></router-view>
  </div>
</template>

6. 一样保存运行，看到页面渲染的内容
   

7. 我们再点击comB链接。页面将会值传给我们：
   

8. 到这里，我们也完成了query传值的学习了。

谢谢大家的阅读，有什么问题也欢迎提出！谢谢