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

問題描述

我用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 }, ]})

問題解答

<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'}’

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