javascript - vue's router-link error report is not displayed

Question

I used vue-cli to build the directory, but using router-link to do single-page routing failed. I don’t know where to solve the problem. I just got into the trap

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 }
})

One of the single pages, the others are basically the same

<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>

Either write it as to='someRoute'
Or write it all as :to='{path: "someRoute"}'

Answer 2

Add

inside

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