vue动态路由和子路由的使用

vue动态路由和子路由的使用

---

动态路由有一个什么适用场景呢？
比如说在同一个路由下，通过动态的改变pathName(本列子的pathName为电子书文件名)达到在同一个页面展示不同的电子书。

小手动起来：

1. 首先我们配置router的入口文件（index.js文件）

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/ebook'
  },
  {
    path: '/ebook',
    component: () => import('../views/ebook/index.vue'),
    children: [
      {
        path: ':fileName',
        component: () => import('../components/EbookReader')
      }
    ]
  }
]


const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

2. 然后在建一个跟页面，我的跟页面为文件名问（index.vue）path为: ‘/ebook’

<template>
    <div class="ebook">
      <ebook-reader></ebook-reader>
    </div>
</template>

<script>
import EbookReader from "@/components/EbookReader";
    export default {
        components: {
          EbookReader
        }
    }
</script>

<style scoped>

</style>

3. 在创建一个动态路由的组件

<template>
  <div class="ebook-reader">
    <div id="read"></div>
  </div>
</template>

<script>

export default {
  
}
</script>

<style scoped>

</style>