使用导航卫士的Vue.js Vue路由器问题

Question

我正在尝试使用路由器的导航保护...当我使用它时，会显示App组件（导航标题），但不会显示子HomePage组件...如果我摆脱了导航保护，就没问题了App和HomePage组件显示良好

在这种情况下，我的导航卫士用法有什么问题？

路由器/ 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 }
})

应用程序

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

主页

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

Answer 1

您忘记添加next() 。

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

    next()
  }

  next()
})