vueパッケージルーティング

vueパッケージルーティングの手順
1、routerファイルディレクトリの下に、2つのファイルを新規作成します.

		homeMoudule.js config.js

2、新しいhomeMoudule.jsでは、ルーティングコードをカプセル化

//           
import router from './config'

const homeModule = [
    router.home,
    router.about,
]

export default homeModule;

3、新しいconfig.js中

import Home from '@/views/Home.vue'

const router = {
    home:{
        path:'/',
        name:'Home',
        component:Home
    },
    about:{
        path:"/about",
        name:"About",
        component:() => import('../views/About.vue')
      }
}

export default router;

4、routerファイルディレクトリの下のindex.jsには次のように書かれています.

import Vue from 'vue'
import VueRouter from 'vue-router'
import homeModule from './homeModule'

Vue.use(VueRouter)

const routes = [
  ...homeModule
]

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

export default router

5、main.jsに登録を導入する

import routerConfig from './router/config';
Vue.prototype.$routerConfig = routerConfig;

6、コンポーネントでの使用

<template>
  <div>
    <button @click="onClick">  </button>
  </div>
</template>

<script>
export default {
  methods:{
    onClick() {
      this.$router.push(this.$routerConfig.about.path)
    }
  }
}
</script>

<style>

</style>