如何在 Vue 2 中使用 Vue 路由器

Question

我正在学习 Vue，并从 the webpack template 开始。我想要做的第一件事是添加对 Vue Router 的支持，但我现在已经花了几个小时在上面，但无法呈现单个路由（我总是以空白页面结束）。令人沮丧！

我只想拥有一个 .vue 文件作为布局文件，将不同的 .vue 文件作为 "pages" 渲染到其中。有人可以告诉我该怎么做吗？这是我最近一次失败的尝试：

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 调用文件夹 router 中的 index.js 文件并使用那里定义的路由：

我通过 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 组件中添加了 link。

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

如何在 Vue 2 中使用 Vue 路由器

How to use Vue Router in Vue 2

vue.js

vue-router