vue实现根据目录结构生成路由

最新推荐文章于 2024-08-30 11:59:06 发布

if时光重来

最新推荐文章于 2024-08-30 11:59:06 发布

阅读量531

点赞数 3

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/admin_web/article/details/129523305

版权

vue 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

目录结构

在这里插入图片描述

页面效果图

在这里插入图片描述

路由文件 router/index.js

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

Vue.use(VueRouter)

var routes = [

]
const files = require.context('../views2', true, /.vue/)
let pages = {};
//生成路由规则
let generator = [];
files.keys().forEach(key => {
  pages[key.replace(/(\.\/|\.vue)/g, '')] = files(key).default;
});
console.log(pages)
//生成所有路由
Object.keys(pages).forEach(item => {
	console.log(item)
	if (item !== 'App') {
    let file_name = item.split('/')[0];
	  generator.push({
		  path: file_name == 'home' ? '/' :'/' + file_name,
		  name: file_name,
		  meta:{
			  active:item
		  },
		  component: pages[item]
	  })
	}
});
console.log(generator)
routes = [...generator];

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

export default router

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <nav>
      <span v-for="(item, index) in routerList" :key="index">
        <router-link :to="item.path" >{{item.name}}</router-link> <template v-if="index < (routerList.length-1)">| </template>
      </span>
    </nav>
    <router-view/>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        routerList: []
      }
    },
    created(){
      this.$router.options.routes.forEach(route => {
          this.routerList.push({
              name: route.name,
              path: route.path
          })
      })
    }
  }
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>