Question

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

我有编译程序logger的编解码器。

我的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方法中使用的功能是导航防护。导航警卫会收到3个参数：to，from和next。来自Navigation Guards documentation：

确保始终调用下一个函数，否则永远不会解析挂钩。

在这里，您只需滚动页面顶部但挂钩永远不会被解析，因此路由器会在滚动后立即停在这里。

像这样编写你的函数：

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

它应该有用。

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

1 个答案: