首页 > 解决方案 > 在路由器组件中使用 vue 组件

问题描述

我在我的 App.vue 中使用路由视图,在我的路由中我使用组件 Base,我想要的是在“Base”组件中调用“teste”组件。

我已经阅读了 vue-router 中的嵌套命名视图,但没有解决我的问题。

路由.js

import Base from './components/base/Base.vue';

export const routes = [
    {
        path: '/',
        components: {
          default: Base
        }
      },

应用程序.vue

<div id="app">
    <router-view></router-view>
  </div>

基础.vue

<template>
  <teste></teste> //this component dosent render
</template>

<script>
import teste from './SideBar.vue'

export default {
  name: 'Base',
  components: {
      teste
  }
}

侧边栏.vue

<template>
    <p>teste</p>
</template>

<script>
export default {
  name: 'teste'
}

主.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import {routes} from './routes'


Vue.use(VueRouter)
Vue.config.productionTip = false

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

标签: vuejs2vue-componentvue-router

解决方案


推荐阅读