Vue.js vue-router issue using navigation guard

Question

I am trying to use a navigation guard w my router... when I use it the App component is displayed ( the navigation header) but the child HomePage component is not displayed... If I get rid of the navigation guard, no problem App and HomePage components are well displayed

what's wrong with my navigation guard usage in this case ?

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/HomePage'
import ShoppingLists from '@/pages/ShoppingListsPage'

Vue.use(Router)

const router = new Router({
  // HTML5 mode history
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: { title: 'Home' }
    },
    {
      path: '/shoppinglists',
      name: 'ShoppingLists',
      component: ShoppingLists,
      meta: { title: 'Shopping Lists' }
    }
  ]
})

router.beforeEach(function (to, from, next) {
  if (to.meta && to.meta.title) {
    document.title = to.meta.title
  }
})

export default router

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

/* eslint-disable no-new */
new Vue({
  el: 'app',
  router,
  components: { App }
})

App.vue

<template>
  <div id="app">
    <ul class="navigation">
      <li id="home"><router-link :to="{ name: 'Home' }" >Home</router-link></li>
      <li id="shoppinglists"><router-link :to="{ name: 'ShoppingLists' }" >Shopping Lists</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

HomePage.vue

<template>
  <div class="hello">
    <img src="./../assets/logo.png">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'Hello',
  data () {
    return {
      msg: 'Welcome to our ShoppingList app'
    }
  }
}
</script>

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>shopping-list</title>
  <link rel="shortcut icon" type="image/png" href="/static/favicon.ico"/>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <app></app>
  <!-- built files will be auto injected -->
</body>

</html>

Ru Chern Chong Ru Chern Chong · Accepted Answer · 2017-10-27T07:44:22

You have forgotten to add next().

router.beforeEach(function (to, from, next) {
  if (to.meta && to.meta.title) {
    document.title = to.meta.title

    next()
  }

  next()
})

Vue.js vue-router issue using navigation guard

1 Answers