删除 Vue js 路由 url 标签

Question

我的 main.js 看起来像：

import Vue from 'vue'
import VueRouter from './router'
import routes from './router/index.js'
Vue.use(VueRouter)
const router = new VueRouter({
routes,
mode: 'history'
})
new Vue({
el: '#app',
router,
render: h => h(App)
})

我正在尝试从 url... 我使用 Webpack 进行开发，如您所见，我正在导入路由文件。我每次都会看到这个错误

"Uncaught TypeError: WEBPACK_IMPORTED_MODULE_1router__.a is not a constructor"

有人有好的路由器文档吗？

这是 /router/index.js 文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Settings from '@/components/Settings'
import Login from '@/components/Login'

Vue.use(VueRouter)

export default new VueRouter({

  routes: [{
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/Settings',
    name: 'Settings',
    component: Settings
  }
  ]
})

Answer 1

VueRouter 的导入语句应该是

import VueRouter from 'vue-router'

编辑

您正在 ./router/index.js 文件中设置 VueRouter，因此请在其中添加 mode:'history' 属性

./router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Settings from '@/components/Settings'
import Login from '@/components/Login'

Vue.use(VueRouter)

export const router = new VueRouter({
  mode: 'history',
  routes: [{
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/Settings',
    name: 'Settings',
    component: Settings
  }
  ]
})

main.js

import Vue from 'vue'
import {router} from './router/index.js'


new Vue({
el: '#app',
router,
render: h => h(App)
})

删除 Vue js 路由 url 标签

Remove Vue js routing url hashtag

vue.js

vue-router

vue-component

vuejs2