之三嵌套路由

嵌套路由，即路由中嵌套路由。

下面的例子，举例商品列表页面中，通过一个路由查看商品的标题，再通过一个路由查看商品的图片。

我们先定义两个组件，Title.vue , Image.vue。

下面是Title.vue

<template>
  <div>
    商品名称
  </div>
</template>

<script>
export default {
  name: 'Title'
}
</script>

<style scoped>

</style>

Image.vue 就不列出了。

然后，我们修改router/index.js , 给商品列表路由定义子路由。如下。

import Vue from 'vue'
import Router from 'vue-router'
import GoodList from '@/views/GoodList'
import Title from '@/views/Title'
import Image from '@/views/Image'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [{
    path: '/goods',
    name: 'GoodList',
    component: GoodList,
    children: [
      {
        path: 'title',
        name: 'Title',
        component: Title
      }, {
        path: 'image',
        name: 'Image',
        component: Image
      }
    ]
  }]
})

然后，再去GoodList.vue 中修改。如下。

<template>
  <div>
    这是商品列表页
    <span>{{$route.params.goodsId}}</span>
    <br />
    <span>{{$route.params.name}}</span>
    <router-link to="/goods/title">显示商品标题</router-link>
    <router-link to="/goods/image">显示商品图片</router-link>
    <div>
      <router-view></router-view>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'GoodList'
}
</script>

<style scoped>

</style>

Done！

之三 嵌套路由

猜你喜欢