Question

我正在尝试将Vue-router与Element-UI（http://element.eleme.io/#/en-US/component/quickstart）一起使用。但我面临一些奇怪的情况。以下是我的app.js，我在其中创建了我的vue-router实例。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/zh-TW'
import 'element-ui/lib/theme-default/index.css'
import myComponent from './vue/page/mycomponent.vue'
import App from './vue/app.vue'

Vue.use(VueRouter)
Vue.use(Vuex)
Vue.use(ElementUI, {locale})

const router = new VueRouter({
  routes: [
    {path: '/mypage', component: myComponent}
  ],
})

const app = new Vue({
  router: router,
  store: store,
  el: '#v-app',
  render: h => h(App),
})

我将路由器视图标记放在app.vue中。

<template lang="pug">
  #v-app
  v-sidebar(:pages="pages")
  router-view
</template>

<script>
import Sidebar from './sidebar.vue'
export default {
  name: 'App',
  data() {
    return {
      pages: [],
    }
  },
  components: {
    'v-sidebar': Sidebar,
  },
}
</script>

<style lang="sass" scoped>
</style>

这是我在sidebar.vue中的路由器链接。

<template lang="pug">
#sidebar
  template(v-for="page in pages")
    router-link(:to="{path: page.prop}")
      i(class="chevron right icon")
  span {{page.label}}

</template>

<script>
export default {
  name: 'Sidebar',
  data() {
    return {
      defaultProps: {
        label: 'label',
        children: 'children',
      },
      pages:[{label: 'link-1', prop: 'mypage'}]
    }
  },
}
</script>

如果我严格转到“/ mypage”，那么它将正确呈现。但是，如果单击侧边栏组件中的链接，页面组件将无法完全呈现。我很想知道是否有某个地方我错过了或者我该怎么办才能解决这种情况。

Vue-router无法使用Element-UI正确呈现组件

0 个答案: