一,动态路由传值
在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传值