Vue笔记：路由之间的传参（手摸手教程）

不跟你多BB,直接开始敲

• 先创建两个页面（其实就是vue create 命令默认创建的项目更改了一下）

• 看一下页面效果

• 给商店页面添加一些商品

<ul>
  <li v-for="item in list" :key="item.id">
    {{ item.name }}
  </li>
</ul>

<script>
export default {
  name: "Home",
  data() {
    return {
      list: [
        { id: 1, name: "第一个商品" },
        { id: 2, name: "第二个商品" },
        { id: 3, name: "第三个商品" },
        { id: 4, name: "第四个商品" },
        { id: 5, name: "第五个商品" },
      ],
    };
  },
};
</script>

看一下页面效果

query传参

• 以前我们通过url传值，都在在地址栏最后面加一个？跟上需要传递的参数，
• 那么在Vue里可以不可以呢？我们来试一下

<router-link to="/about?id=1">{{ item.name }}</router-link>

query接收参数

• 创建一个生命周期函数，我们打印一下this.$route看一下

<script>
export default {
  created() {
    console.log(this.$route)
  }
}
</script>

• 用query传值的时候，所有的参数都在this.$route.query里面

• 直接把参数显示在页面上

<template>
  <div class="about">
    <h1>这里是购物车</h1>
    <p>{{ this.$router.query.id }}</p>
  </div>
</template>

• 看一下效果

• 太好了，这样做可以获得到参数，那么我们更改一些写法，使其每次点击的时候传递不同的参数

<router-link :to="`/about?id=${item.id}`">{{ item.name }}</router-link>

看一下效果

动态路由的的传参

先创建一个新的info页面，以便我们观察

在router页面下的index文件里配置相关的路由信息

• 动态路由传递参数的时候，路由配置哪里设置了几个参数，在传递的时候就需要传递几个参数

const info = () => import('../views/info/index')
  {
    path:'/info/:id/:name',
    name:'info',
    component:info
  }

在商店页面更改一下router-link

<h1>这里是商店</h1>
<ul>
  <li v-for="item in list" :key="item.id">
    <!-- <router-link :to="`/about?id=${item.id}`">{{ item.name }}</router-link> -->
    <router-link :to="`/info/${item.id}/${item.name}`">
    {{ item.name }}
    </router-link>
  </li>
</ul>

动态路由接收参数（params）

还记得上面打印得那张this.$route得图片么？动态路由的参数在params里

• 动态路由传递的参数需要这样接收
• this.$route.params.参数
  

<template>
  <div>
    <h1>这里是商品详情页面</h1>
    <p> {{ this.$route.params.id }} </p>
    <p> {{ this.$route.params.name }} </p>
  </div>
</template>

<script>
export default {
  
}
</script>

• 看一下页面效果

route和rouer的区别

$router

• 当前所有的路由对象可以理解为routes
• 就是这个我们配置所有路由的地方
  

$route

• 当前路由对象用于获取当前路由里面的属性或者方法

• 当前的页面哪个是活跃的，那么$route就是谁

页面间的跳转

• 路由的切换，本质是组件的显示与隐藏
• 字符串的方式进行跳转

<router-link :to="`/ 页面名称?参数名=${参数值}`"></ router-link>

• 对象的方式进行跳转

<router-link :to="{path: '/页面名称' }">< / router-link>

• js的方式进行跳转

我们利用$router的push方法进行跳转

<h1>这里是商店</h1>
<ul>
 <li v-for="item in list" :key="item.id">
   <!-- <router-link :to="`/about?id=${item.id}`">{{ item.name }}</router-link>
   <router-link :to="`/info/${item.id}/${item.name}`">动态路由
   {{ item.name }}
   </router-link> -->
   <button @clikc='jump(item)'>跳转页面,传参：{{item.id}}：{{item.name}}</button>
 </li>
</ul>

• 当我们用js的方式进行跳转，同时又需要传递参数的时候，一定要使用命名路由，就是这个
• 一般我们用命名路由的时候，name和path的值是一样的
  
• 点击按钮，执行jump方法，进行跳转
• 传递参数的格式为
• this.$router.push({name:‘路由名称’,query:{ 参数们 }})
• 当需要用到动态路由传参(params)的时候，把query换成params即可

  methods:{
    jump(item) {
      console.log(item)
      this.$router.push({name:'About',query:{id:item.id,name:item.name}})
    }
  }

看一下效果
非常成功