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

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>

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中，有一个添加插件的选项。 我选择了路由器插件（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: 。