Question

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

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

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

如何在Vue 2中使用Vue Router

2 个答案: