Vue.js vue路由器未正确路由，未显示任何组件_Vue.js_Vue Router

Vue.js vue路由器未正确路由，未显示任何组件

vue.js

Vue.js vue路由器未正确路由，未显示任何组件,vue.js,vue-router,Vue.js,Vue Router,我试图使用vue路由器显示不同路由的不同组件。然而，它似乎不起作用我有一个编译程序的代码笔我的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 './com

我试图使用

vue路由器

显示不同路由的不同组件。然而，它似乎不起作用

我有一个编译程序的代码笔

我的

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和

路由器视图

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

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

网页包将所有内容构建到

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>

我原以为它会改成新路线

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

但是，即使我直接转到该路线，也不会显示

home.vue

组件。

在每个

方法之前的中使用的功能是导航保护。导航卫士接收3个参数：至
，自
和下一个
。从：
确保总是调用下一个函数，否则钩子将永远无法解析
在这里，您只需在页面顶部滚动，但钩子永远不会被解析，因此路由器在滚动之后停止
按如下方式编写函数：
router.beforeEach(function (to, from, next) {
    window.scrollTo(0, 0);
    next();
});

它应该可以工作。
在每个
方法之前的中使用的功能是导航保护。导航卫士接收3个参数：至
，自
和下一个
。从：
确保总是调用下一个函数，否则钩子将永远无法解析
在这里，您只需在页面顶部滚动，但钩子永远不会被解析，因此路由器在滚动之后停止
按如下方式编写函数：
router.beforeEach(function (to, from, next) {
    window.scrollTo(0, 0);
    next();
});

它应该会起作用
router.beforeEach(function (to, from, next) {
    window.scrollTo(0, 0);
    next();
});