vue路由传值

一，动态路由传值

   在path中添加参数名称 '/home/:id/:name'   在route-link中to接受   :to='/home/16222/张三'，接收用this.$route.params

 

注意：当跳往的页面为二级路由页面时候时， router-view里面需要添加 :key='$route.fullPath' 否则页面更新请求参数，页面数据却没改变。

代码如下：

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Detail from '../components/datailView.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
    children: [
      {
        path: 'datail/:id/:name',
        name: 'Datail',
        component: Detail
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

跳转前的页面代码：

<template>
  <div class="about">
    <h1>相关</h1>
    <ul>
      <router-link
        tag="li"
        :to="'/about/datail/' + item.id + '/' + item.name"
        v-for="(item, index) in list"
        :key="index"
        ><h2>{{ item.name }}</h2></router-link
      >
      <router-view :key="$route.fullPath" />
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          name: "刘亦菲",
        },
        {
          id: 2,
          name: "章子怡",
        },
        {
          id: 3,
          name: "汪峰",
        },
      ],
    };
  },
};
</script>

跳转后的页面：

<template>
  <div>我的id是：{{ id }},我的name是：{{ name }}</div>
</template>
<script>
export default {
  name: "detail",
  data() {
    return {
      id: "",
      name: "",
    };
  },
  created() {
    let { id, name } = this.$route.params;
    this.id = id;
    this.name = name;
  },
  methods: {},
};
</script>

二，query传值

 在path中添加参数名称 '/home'   在route-link中to接受  :to='/home/id=16222&name=张三'，接收用this.$route.query

写法如下：

 

 

动态路由和query传值不同：

        当动态路由传值为空时 ,页面不会显示，二query传值为空时，页面会显示

方法三：通过路由中的name属性（此方法最为简单，不用拼接）

1，name结合query传值

 

 2，name结合params传值 （注意path也需要改成动态路由那样的格式）

 

 

 方法四：props传值（注意此方法只适用于动态路由传值方式）

方法五： meta传值