vue-router 路由不正确，没有显示任何组件

Question

我正在尝试使用 vue-router 来显示不同路线的不同组件。但是它似乎没有用。

我有编译程序的代码笔here。

我的main.js只是定义路由器并启动vue应用程序。它正在导入组件并设置路由。

import scss from './stylesheets/app.styl';

import Vue from 'vue';
import VueRouter from 'vue-router';
import Resource from 'vue-resource';

import App from './components/app.vue';
import Home from './components/home.vue';
import Key from './components/key.vue';
import Show from './components/show.vue';

// Install plugins
Vue.use(VueRouter);
Vue.use(Resource);

// Set up a new router
var router = new VueRouter({
  mode: 'history',
  routes:[
    { path: '/home', name: 'Home', component: Home },
    { path: '/key',  name: 'Key',  component: Key  },
    { path: '/show', name: 'Show', component: Show },

     // catch all redirect
    { path: '*', redirect: '/home' }
  ]
});

// For every new route scroll to the top of the page
router.beforeEach(function () {
  window.scrollTo(0, 0);
});

var app = new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app');

我的app.vue真的很简单，只是一个包装器div和router-view

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

<template lang="pug">
  .app-container
    router-view
</template>

路由器应该显示的其他三个组件同样简单，每个看起来基本相同。只是 name 和 h1 内容不同。

<script>
  export default {
    name: "home"
  }
</script>

<template lang="pug">
  h1 Home
</template>

Webpack 将所有内容构建到 app.js 中，没有任何错误。我有一个超级简单的 index.html 文件，我在 Chrome.

中打开

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sagely Sign</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="js/app.js"></script>
  </body>
</html>

查看控制台，我没有发现任何错误。我注意到的是 URL 保持不变，看起来路由器没有重定向到 /home.

file:///Users/username/Development/test-app/build/index.html

我本以为它会更改为新路线。

file:///Users/username/Development/test-app/build/index.html#/!/home

但即使我直接转到该路线，home.vue 组件也不会显示。

Answer 1

您在 beforeEach 方法中使用的函数是导航守卫。 Navigation guards 接收 3 个参数：to、from 和 next。来自 Navigation Guards documentation:

Make sure to always call the next function, otherwise the hook will never be resolved.

在这里，您只是在页面顶部滚动，但挂钩从未解析，因此路由器在滚动后立即停在此处。

像这样写你的函数：

router.beforeEach(function (to, from, next) {
    window.scrollTo(0, 0);
    next();
});

它应该可以工作。

vue-router 路由不正确，没有显示任何组件

vue-router not routing properly, no components are shown

vue.js

vue-router