How to use Vue Router in Vue 2

Question

I'm learning Vue, and started of with the webpack template. The first thing I'm trying to do is to add support for Vue Router, but I've spent several hours on it now without being able to render a single route (I always end up with a blank page). Frustrating!

I simply want to have a single .vue file, acting as the layout file, into which different .vue files, acting as "pages", are rendered into. Can someone tell me how to do this, please? Here's my latest failed attempt:

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 (the layout file)

<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 (almost identical to components/Home.vue)

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

<script>
    export default {
    }
</script>

<style scoped>

</style>

Please try to create webpackbin for that. It is really strange that it is not working so you probably have some little error in code somewhere... — Marek Urbanowicz
– Marek Urbanowicz, Commented Nov 26, 2016 at 9:53
Sorry @MU, I just realized an error in the code I had (there has been a lot of try-and-errors lately, so now I'm not sure how anything works anymore ^^'), but the code I posted was wrong. I've now updated it (changed the main.js file), can you take a look at it again, please? — Peppe L-G
– Peppe L-G, Commented Nov 26, 2016 at 9:58
Also, when I inspect the page in Chrome, I see <div id="app"></div>, so my App component has not been rendered at all. — Peppe L-G
– Peppe L-G, Commented Nov 26, 2016 at 10:00

Peppe L-G · Accepted Answer · 2016-11-26 11:59:52Z

10

I finally got it to work. The main.js file should be written like this:

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

I hope this saves hours of trouble for someone else.

EDIT

The following:

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

can preferably be replaced with:

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

edited Nov 26, 2016 at 11:59

answered Nov 26, 2016 at 10:37

Peppe L-G

8,4182 gold badges29 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ege Ersoz Over a year ago

Regarding your edit, the difference is that the template option is for the stand-alone version of Vue, whereas you need the render option if using the runtime-only version.

pashute · Accepted Answer · 2018-09-05 10:17:56Z

I found out how to get main.js to call the index.js file in folder router and work with the routes defined there:

I had created my app via the VUE UI (with VUE 3.1 and CLI/3)

In the VUE UI there is an option to add plugins. I chose the router plugin (route) and it asked if I want to install a new route or install the framework. (You first need to install the framework...)

It then changed my main.js file to have the following: (the additions are marked with comments)

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

It also added a new folder router and in it index.js with the code

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

It also installed the latest router package and added a link in the HelloWorld component to the router documentation.

By the way, notice the extra name: in the route definitions.

Collectives™ on Stack Overflow

How to use Vue Router in Vue 2

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related