Vue-router的传参和简化跳转

简介：
Vue Router 是 Vue.js 官方的路由管理器，它提供了灵活的方式来管理应用的路由和导航。在 Vue Router 中，传递参数是一个常见的需求，它允许我们在不同的路由之间传递数据，以实现更灵活和交互性的页面导航。

创建一个路由

路径：src\router\index.js

import Vue from 'vue'//引入vue
import VueRouter from 'vue-router' //引入vue-router
import HomeView from '../views/HomeView.vue' //引入父组件
import HomeView1 from '../views/HomeView1.vue'  // 引入子组件
Vue.use(VueRouter) //注册vue-router
const routes = [
  {
    path: '/',
    name: 'home', //给路由命名
    component: HomeView,
    children: [
      {
        name: 'HomeView1', //给路由命名
        path: '/zj',
        component: HomeView1
      }
    ]
  },
]

const router = new VueRouter({
  routes
})
export default router //暴露routes

在HomeView.vue使用

路径：src\views\HomeView.vue

<template>
  <div class="box">
   我是父组件
   <!-- <router-link to="/zj">你好</router-link> -->
   <router-view></router-view> //路由占位符
  </div>
</template>
<script>
export default {
  name: 'HomeView',
  data () {
    return {
      m: {
        name: '张三',
        age: 18
      }
    }
  }
}
</script>
<style scoped>
.box{
  width: 100%;
  height: 400px;
  border:2px solid pink;
}
</style>

1.query传参

query有两种写法：

1. 字符串的写法传参数
2. 对象的写法传参数

<!-- 字符串的写法传参数 -->
   <!-- <router-link :to="`/zj?name=${m.name}&age=${m.age}`">你好</router-link> -->
<!-- ------------------------------------------------------------------------------------------------------------- -->
   <!-- 对象的写法传参数 -->
   <!-- <router-link :to="{
   path:'/zj',
   query:{
    name:m.name,
    age:m.age
   }
   }">你好</router-link> -->

query接收参数

<template>
  <div class="box1">
    你好啊11111111
    <p>他叫：{{$route.query.name}}</p>
    <p>今年：{{$route.query.age}}岁</p>
  </div>
</template>
<style>
.box1{
   margin-top: 40px;
  width: 100%;
  height: 160px;
  border: 2px solid black;
}
</style>

2.query传参

params有两种写法：

1. 字符串的写法传参数
2. 对象的写法传参数

注意：使用对象写法传参只能通过name，不能通过path

<!-- 字符串的写法传参数 -->
   <!-- <router-link :to="`/zj/${m.name}/${m.age}`">你好</router-link> -->
   <!-- <router-link to="/zj/张三/18">你好</router-link> -->
<!-- ------------------------------------------------------------------------------------------------------------- -->
<!-- params参数对象写法 -->
 <router-link :to="{
   name:'HomeView1',
   params:{
    name:m.name,
    age:m.age
   }
   }">你好</router-link>

params接收参数

<template>
  <div class="box1">
    你好啊11111111
    <p>他叫：{{$route.params.name}}</p>
    <p>今年：{{$route.params.age}}岁</p>
  </div>
</template>
<style>
.box1{
   margin-top: 40px;
  width: 100%;
  height: 160px;
  border: 2px solid black;
}
</style>

3.简化跳转

简化前：需要写完整的路径

<router-link :to="/zj">你好</router-link>

简化后：直接通过名字跳转

<router-link :to="{name:'HomeView1'}">你好</router-link>

简化写法配合传递参数

 <!-- <router-link :to="{
 	name:'HomeView1',
   query:{
    name:m.name,
    age:m.age
   }
   }">你好</router-link> -->