如何在Vue 2中使用Vue Router

Question

我正在学习Vue，并从webpack模板开始。我想第一件事就是为Vue Router添加支持，但是我已经尝试了几个小时，仍然无法呈现单个路由（最终总是得到一个空白页面）。非常令人沮丧！

我只想拥有一个单独的.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>

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

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

<script>
    export default {
    }
</script>

<style scoped>

</style>

- Peppe L-G

---

请尝试为此创建webpackbin。很奇怪它不起作用，所以您可能在代码中有一些小错误... - Marek Urbanowicz

抱歉@MU，我刚刚意识到我之前的代码有误（最近一直在尝试和错误中摸索，现在已经不确定任何东西是如何工作的^^'），但我发布的代码是错误的。我已经更新了它（更改了main.js文件），你能再看一下吗？谢谢！ - Peppe L-G

此外，当我在 Chrome 中检查页面时，我看到 <div id="app"></div>，这意味着我的 App 组件根本没有被渲染。 - Peppe L-G

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')

- Peppe L-G

---

关于您的编辑，区别在于template选项适用于Vue的独立版本，而如果使用仅运行时版本，则需要render选项。 - Ege Ersoz

Answer 2

我发现如何让main.js调用位于router文件夹中的index.js文件并与在那里定义的路由一起工作：

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

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

然后它更改了我的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:。

- pashute