javascript - le rapport d'erreur de lien de routeur de vue n'est pas affiché

Question

J'ai utilisé vue-cli pour créer le répertoire, mais l'utilisation de router-link pour effectuer un routage sur une seule page a échoué. Je ne sais pas où résoudre le problème, je suis juste tombé dans le piège

.

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

L'une des pages individuelles est fondamentalement la même

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

Soit écrivez-le comme to='someRoute'
Ou écrivez le tout comme :to='{path: "someRoute"}'

Answer 2

Ajoutez

à l'intérieur de

index.js

exporter le routeur par défaut

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