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传值

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值