Question

我已经查看了Stackoverflow上有关路由不起作用的其他各种问题，但都没有指出为什么我的路由不起作用。

这是我的路由器：

import Vue from 'vue'
import Router from 'vue-router'
import Foo from '@/components/Forms/foo'
import Bar from '@/components/Forms/bar'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/foo',
      component: Foo
    },
    {
      path: '/bar',
      component: Bar
    }
  ]
})

此处foo：

<template id="foo">
    <form name="basic-form" v-on:submit="submit">
        <fieldset>
            <legend>User</legend>
            <ul>
                <li>
                    <label>First Name</label>
                    <input v-model="firstName" name="first-name" />
                </li>
            </ul>
        </fieldset>
        <button type="submit">Submit</button>
    </form>
</template>

<script>
export default {
  name: 'foo',
  data: function () {
    return {
      firstName
    }
  },
  methods: {
    submit: function (event) {
      event.preventDefault()
      console.log(this.$data.firstName)
    }
  }
}
</script>

这是栏：

<template id="createDb">
    <button v-on:click="createDb">Create Database</button>
</template>

<script>
export default {
  name: 'CreateDb'
}
</script>

值得注意的是，如果我将路径设置为根/，则每个组件都可以独立工作。从本质上讲，无论键入什么内容，它都会导航到根目录，因此将抓取并使用与根目录关联的任何组件。我不知道为什么会这样。

Answer 1

我的一个朋友在Twitter上给了我答案，将mode: 'history'添加到路由器上可以使其按预期工作，此处已更新：

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/foo',
      component: Foo
    },
    {
      path: '/bar',
      component: Bar
    }
  ]
})

Vue.js路由器无法正常工作

1 个答案: