Question

好的，所以我用VueCli开始了一个基本的VueJS。

这是我的设置：

App.vue

<template>
  <div id="app">
    <router-link to="/home"><span>Home</span></router-link>
    <router-view></router-view>
  </div>
</template>

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

Home.vue

<template>
    <h1>{{ msg }}</h1>
</template>

<script>
  export default {
    name: 'home',
    data () {
      return {
        msg: 'HomeView'
      }
    }
  }
</script>

来自路由器的

index.js ：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/pages/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home
    }
  ]
})

main.js ：

import Vue from 'vue'
import App from './App'
import NavigationBar from './components/NavigationBar'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {App}
})

new Vue({
  el: '#navigation-bar',
  template: '<NavigationBar/>',
  components: {NavigationBar}
})

这完全没问题。 routerlink工作并显示Home.vue。

但是我创建了一个NavigationBar组件：

NavigationBar.vue

<template>
  <div><span>Test</span>
    <router-link to="/home"><span>Home</span></router-link></div>
</template>

<script>
  export default {
    name: 'navigationBar',
    data () {
      return {
      }
    }
  }
</script>

当我现在删除App.vue中的路由器链接并添加导航栏ID时，我看不到路由器链接。但导航栏被加载，因为我看到了测试跨度：

App.vue

<template>
  <div id="app">
    <div id="navigation-bar"></div>
    <router-view></router-view>
  </div>
</template>

为什么它不起作用？路由器链接就在模板内部，我没有收到任何错误消息。

在Component内部不能使用router-link

0 个答案: