javascript - vue的router-link報錯不顯示

Question

我用vue-cli搭建好了目錄，但是用router-link做單頁路由沒有成功，不知道哪裡有問題求解，本人剛進坑

app.vue

<template>
  <p id="app">
      <headers></headers>
          <p class="tap">
              
          <p class="tab-item">
          <router-link :to="/Goods">第一项</router-link>
        </p>
        <p class="tab-item">
          <router-link to="/Ratings">第二项</router-link>
        </p>
        <p class="tab-item">
          <router-link to="/Seller">第三项</router-link>
        </p>
        
        <router-view></router-view> 
      </p>
  </p>
</template>


<script>
import headers from './components/header/header';
    
export default {
    components:{
        headers
    },
  name: 'app',
};
</script>

main.js

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


Vue.config.productionTip = false

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

其中一個單頁，其他都基本一致

<template lang="html">
    <p id="ratings">
        <p class="heihei">
            {{arr}}
        </p>
    </p>
</template>

<script>
    export default{
        name:'Ratings',
        data: {
            arr:'afafaf'
        }
    };
</script>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Goods from '@/components/goods/goods'
import Ratings from '@/components/ratings/ratings'
import Seller from '@/components/seller/seller'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/Goods',
      component: Goods
    },{
      path: '/Ratings',
      component: Ratings
    },{
      path: '/Seller',
      component: Seller
    },
    
  ]
})

Answer 1

<template>
  <p id="app">
      <headers></headers>
          <p class="tap">
              
          <p class="tab-item">
          <router-link :to="/Goods">第一项</router-link>
        </p>
        <p class="tab-item">
          <router-link to="/Ratings">第二项</router-link>
        </p>
        <p class="tab-item">
          <router-link to="/Seller">第三项</router-link>
        </p>
        
        <router-view></router-view> 
      </p>
  </p>
</template>

要嘛都寫成 to='someRoute'
要嘛都寫成 :to='{path: "someRoute"}'

Answer 2

index.js 裡面 加上

export default router

import Vue from 'vue'
import Router from 'vue-router'
import Goods from '@/components/goods/goods'
import Ratings from '@/components/ratings/ratings'
import Seller from '@/components/seller/seller'


Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/Goods',
      component: Goods
    },{
      path: '/Ratings',
      component: Ratings
    },{
      path: '/Seller',
      component: Seller
    },
  ]
})
export default router