Navigation Using Router

First install the official vue-router package.

$ npm install --save vue-router

Create a new file ./src/app/router/index.js and define a router as shown below.

import Vue from 'vue'
import Router from 'vue-router'


export default new Router({
  mode: 'history',
  routes: [
    {path: '/', component: require('../components/home.vue')},
    {path: '/foo', component: require('../components/foo.vue')},
    {path: '/bar', component: require('../components/bar.vue')},
    {path: '*', redirect: '/'} // 404
  scrollBehavior (to, from, savedPosition) {
    return !savedPosition ? { x: 0, y: 0 } : savedPosition

Create components which we've defined in the router file above.


Open the ./src/app/components/app.vue file and replace the existing template with the one below.

  <div id="app">
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/foo">Foo</router-link></li>
      <li><router-link to="/bar">Bar</router-link></li>
    <router-view class="view"></router-view>

Open the ./src/app/index.js file and install the router.

import router from './router';

export const app = new Vue({

Open the ./src/app/server-entry.js file and set router root path.

export default (ctx) => {

Open the ./src/server/router/routes/app.js file and set application context as show below.

exports.render = (req, res) => {
  let ctx = {url: req.originalUrl};
  let page = req.vue.renderToStream(ctx);

results matching ""

    No results matching ""