在嵌套路由中,父路由向子路由传值,除了query外,还有params,params传值有两种情况,一种是值在url中显示,另一种是值不显示在url中。
(1)显示在url中
apple.vue
<template>
<div>
<div>
{{msg}}
{{$route.params.num}}
<button @click="getParam">getParam</button>
</div>
<div>
<router-view></router-view>
</div>
<div>
<router-link :to="{path:'/apple/apple1'}">apple1</router-link>
<router-link :to="{path:'/apple/apple2'}">apple2</router-link>
</div>
</div>
</template>
<script>
export default{
name:'Apple',
data(){
return {
msg: 'hello apple'
}
},
methods:{
getParam(){
console.log(this.$route.params.num);
}
}
}
</script>
<style>
</style>
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Apple from '@/components/apple'
import Banana from '@/components/banana'
import Apple1 from '@/components/Apple1'
import Apple2 from '@/components/Apple2'
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
{
path: '/',
redirect: 'helloworld'
},
{
path: '/helloworld',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/apple/:num', //参数在路由里面设置
name: 'Apple',
component: Apple,
children:[
{
path:'apple1',
name:'Apple1',
component:Apple1
},
{
path:'apple2',
name:'Apple2',
component:Apple2
}
]
},
{
path: '/banana',
name: 'Banana',
component: Banana
}
]
})