如何在Vue 2中使用Vue Router

Question

我正在学习Vue，并开始使用the webpack template。我要做的第一件事就是添加对Vue路由器的支持，但我现在花了几个小时就没有能够呈现单一路由（我总是以空白页面结束）。令人沮丧！

我只想拥有一个单独的.vue文件，作为布局文件，在其中呈现不同的.vue文件，充当“页面”。请问有人能告诉我怎么做吗？这是我最近的失败尝试：

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Home from './components/Home'
import About from './components/About'

Vue.use(VueRouter)

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About }
]

const app = new Vue({
    router: new VueRouter({
        routes
    }),
    component: App
}).$mount('#app')

App.vue（布局文件）

<template>
    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <router-link to="/">Go to Foo</router-link>
            <router-link to="/about">Go to Bar</router-link>
        </p>

        <router-view></router-view>

    </div>
</template>

<script>
    export default {
    }

</script>

<style scoped>

</style>

components / About.vue（几乎与components / Home.vue相同）

<template>
    <div>
        <h1>About</h1>
        <p>This is the about page!</p>
    </div>
</template>

<script>
    export default {
    }
</script>

<style scoped>

</style>

Answer 1

我终于开始工作了。 main.js文件应该像这样写：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Home from './pages/Home'
import About from './pages/About'

Vue.use(VueRouter)

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About }
]

const router = new VueRouter({
    routes
})

const app = new Vue({
    router,
    template: '<App />',
    components: {
        App
    }
}).$mount('#app')

我希望这可以为其他人节省数小时的麻烦。

编辑

下列：

const app = new Vue({
    router,
    template: '<App />',
    components: {
        App
    }
}).$mount('#app')

最好可以替换为：

const app = new Vue({
    router,
    render: function(createElement){
        return createElement(App)
    }
}).$mount('#app')

Answer 2

我发现如何让main.js在文件夹index.js中调用router文件并使用那里定义的路由：

我通过VUE UI创建了我的应用程序（使用VUE 3.1和CLI / 3）

在VUE UI中，有一个添加插件的选项。我选择了路由器插件（路由），它询问我是否要安装新路由或安装框架。 （首先需要安装框架......）

然后它将我的main.js文件更改为具有以下内容:(添加内容标记为注释）

import Vue from 'vue'
import './plugins/axios'
import App from './App.vue'
import router from './router' // added by router plugin

Vue.config.productionTip = false

new Vue({
  router, // added by router plugin
  render: h => h(App)
}).$mount('#app')

它还添加了一个新的文件夹router，并在其中添加了index.js代码

import Vue from 'vue'
import VueRouter from 'vue-router'
// import Hello from '@/components/HelloWorld' // @pashute: I added this later...

Vue.use(VueRouter)

const routes = [
    // { 
    //    path: '/',
    //    name: 'Hello',
    //    component: Hello
    // }
]

// eslint-disable-next-line no-new
const router = new VueRouter({
   routes
})

export default router

它还安装了最新的路由器软件包，并在HelloWorld组件中添加了一个链接到路由器文档。

顺便说一下，注意路线定义中的额外name:。