Question

我开始使用Vue，或者使用路由器vue我已经确定了下面的错误，我认为这是与autentica相关的，你怎么看？

我的路线留在这里

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'landing-page',
      component: require('@/components/LandingPage'),
    },
    {
      path: '/dashboard',
      name: 'dashboard-page',
      component: require('@/components/Dashboard').default,
    },
    {
      path: '*',
      redirect: '/',
    },
  ],
});

我的Html留在这里

<template>
    <ul class="navigation">
        <li class="navigation__active"><router-view to="/"><i class="zmdi zmdi-home"></i> Home</router-view></li>
        <li class="navigation__active"><router-view to="/dashboard"><i class="zmdi zmdi-home"></i> Dashboard</router-view></li>
    </ul>
</template>
<script>
export default {};
</script>

此错误

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <MenuPage> at src\renderer\components\Menu.vue
         <DesktopSmf> at src\renderer\App.vue
           <Root>

我做错了什么？

Answer 1

当您想要创建链接时，router-link不是router-view。 router-view是链接内容所在的块，它必须位于App.vue。

所以这应该适用于您的Menu.vue：

<ul class="navigation">
    <li class="navigation__active"><router-link to="/"><i class="zmdi zmdi-home"></i> Home</router-link></li>
    <li class="navigation__active"><router-link to="/dashboard"><i class="zmdi zmdi-home"></i> Dashboard</router-link></li>
</ul>

在您的App.vue模板中，您必须有类似

的行

<router-view />

使用Vue-Router时[Vue警告]：无法安装组件：未定义模板或渲染功能

1 个答案: