实例:我们打开商品列表页面,一个路由查看商品标题,一个路由查看商品图片,怎么去实现呢?
1、新建 Title.vue子组件:
<template>
<div>
这是商品标题子组件
</div>
</template>
<script>
export default {
data(){
return{
msg: ''
}
}
}
</script>
<style>
</style>
2、新建 Image.vue子组件:
<template>
<div>
这是商品图片子组件
</div>
</template>
<script>
export default {
data(){
return{
msg: ''
}
}
}
</script>
<style>
</style>
3、修改src/route/index.js文件
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/views/GoodsList'
// 2、导入子组件
import Title from '@/views/Title'
import Image from '@/views/Image'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
// 1、一级路由
path: '/goods',
name: 'GoodsList',
component: GoodsList,
// 2、定义子路由
children: [
{
path: 'title',
name: 'title',
component:Title
},
{
path: 'image',
name: 'image',
component:Image
}
]
}
]
})
4、修改商品列表页面GoodsList.vue文件:
<template>
<div>
这是商品列表页面
浏览器上输入http://localhost:8080/goods
通过一级路由进入商品列表页面,
再通过 router-link链接到子路由 /title和 /image下
<router-link to='/goods/title'>显示商品标题</router-link>
<router-link to='/goods/image'>显示商品图片</router-link>
<div>
// 一定要加<router-view>渲染,否则<router-link>不起作用
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
data(){
return{
msg: ''
}
}
}
</script>
<style>
</style>
Vue 嵌套路由(路由中嵌套路由)原理实例讲解
猜你喜欢
转载自blog.csdn.net/qq_33867131/article/details/81263795
今日推荐
周排行