Vue Router实现动态路由

根据输入的路径的不同动态显示内容

第一步

修改router.js

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({ 
 routes: [  
  {     
 path: '/',      redirect: '/ebook' 
   },  
  {      path: '/ebook',  
    component: () => import('./views/ebook/Index.vue'),  
    children: [        {   
   // 动态路径参数 以冒号开头 
    path: ':fileName',
    component: () => import('./components/ebook/EbookReader.vue')        }    
  ]   
 } 
 ]});复制代码

第二步

在Index.vue里面引入EbookReader.vue组件

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

<script> 
 import EbookReader from '../../components/ebook/EbookReader'; 
 export default { 
   components: {      EbookReader    } 
 };


</script><style lang="scss" rel="stylesheet/scss" scoped> 

@import "../../assets/styles/global";</style>复制代码

第三步

在EbookRead.vue里显示和路径名对应的内容

<template>
<div class="ebook-reader">  
{{$route.params.fileName}}
</div></template>

<script>
  export default { 
   name: 'EbookReader'
  };

</script><style scoped></style>复制代码

效果图

最后再加上根据动态路由显示不同的书,并可以通过nginx地址下载

在EbookRead.vue组件里面添加mounted钩子

mounted () { 
 // nginx文件的路径  
const baseUrl = 'http://10.131.39.254:90/epub/'; 
 
// 将fileName里有"|"换成"/" 
 const fileName = this.$route.params.fileName.split('|').join('/');  
 console.log(`${baseUrl}${fileName}.epub`);}复制代码

效果图展示

转载于:https://juejin.im/post/5cc2cc06e51d456e303db8d8