删除 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)
})

我正在尝试从网址中删除主题标签... 我使用 Webpack 进行开发，您可以看到我正在导入路由文件。 我每次都看到这个错误

“未捕获的类型错误：WEBPACK_IMPORTED_MODULE_1router__.a 不是 构造函数”

谁有好的路由器文档？

这是 /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语句应该是

import VueRouter from 'vue-router'

编辑

您在 ./router/index.js 文件 itsels 中设置 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
  }
  ]
}) 

ma​​in.js

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


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