目录结构

1
2
3
4
5
6
7
└── src
    ├── config
    │   └── router.js
    ├── router
    │   └── index.js
    └── APP.vue
    └── main.js

1.创建公共路由

1
2
3
4
5
6
7
8
// src/config/router.js
export default [
    {
        path: '/alert',
        name: 'alert',
        component: () => import('module_vue/packages/alert')
    }
]

2.引用公共路由

1
2
3
4
5
6
7
8
9
10
11
12
// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import commonRouter from '../config/router'
Vue.use(VueRouter)

const router = new VueRouter({
    routes: commonRouter,
    mode: 'hash', // default: hash ,history
})

export default router

3.项目中引入路由

1
2
3
4
5
6
7
8
9
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// src/App.vue
<template>
  <div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  mounted() {
  }
}
</script>

最后更新： 2021年08月13日 11:51