如何配置Vuejs以便拾取路由器

Question

我正在尝试在我的应用中集成vue-router。在我的admin.js中，我有：

import Vue from 'vue'
import Router from 'vue-router'
import AdminHome from '../admin/home.vue'
import AdminMetroArea from '../admin/metro-area.vue'


Vue.use(Router)

export default new Router({
  routes: [
    { path: '/metro-areas/', name: 'metro-areas', component: AdminMetroArea },
    { path: '/', component: AdminHome }
  ]
})

document.addEventListener('DOMContentLoaded', () => {
  const admin_home   = new Vue(AdminHome).$mount('#vue-admin-home');
})

我打电话给：

<td>my metro: <router-link :to="{ name: 'metro-areas' }">{{metro_area.metro_area}}</router-link></td>

但是我收到以下错误：

如何配置我的Vue应用程序来接收我的路由器？

Answer 1

在初始化期间，Router需要明确地提供给Vue：

new Vue({
    router: Router
})

Router是import Router from '...path'。

Answer 2

在Main.js文件中执行以下操作：

import router from './router'

其中＆＃39; ./ router＆＃39;将是您的路由器文件的路径。

然后，

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  },
  data() {
    return {}
  }
})

然后，将它提供给同一文件（Main.js）中的Vue。快乐编码：）