Question

我试图在Vue应用程序中创建一些组织，所以我将路由器配置移到了单独的文件中：

# /_helpers/router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import MemberDetail from '../MemberDetail';
import LoginPage from '../LoginPage';

Vue.use(VueRouter)

const routes = [
  { path: '/', component: MemberDetail },
  { path: '/login', component: LoginPage },
];

export const router = new VueRouter({routes});

router.beforeEach((to, from, next) => {
  // redirect to login page if not logged in and trying to access a restricted page
  const publicPages = ['/login'];
  const authRequired = !publicPages.includes(to.path);
  const loggedIn = localStorage.getItem('user');

  if (authRequired && !loggedIn) {
    return next('/login');
  }

  next();
})

然后将导出的路由器添加到我的主要application.js中：

import Vue from 'vue/dist/vue.esm'
import App from '../components/app.vue'
import { router } from '../components/_helpers';

document.addEventListener('DOMContentLoaded', () => {
  new Vue({
      el: '#app',
      router,
      render: h => h(App)
  });
})

在我的App.vue中，我尝试显示路由器视图：

<template>
  <div class="page-container">
    <router-view></router-view>
  </div>
</template>

<script>

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

<style scoped>
</style>

不幸的是，这导致以下错误：

[Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

我不明白这是怎么回事...我正在将路由器添加到新的Vue呼叫中，因此我认为它应该可用。

谢谢

将代码移到帮助文件中时，路由器不起作用

0 个答案: