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 }, ]})
問題解答
回答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'}’
回答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
相關(guān)文章:
1. android - 用textview顯示html時如何寫imagegetter獲取網(wǎng)絡(luò)圖片2. debian - docker依賴的aufs-tools源碼哪里可以找到啊?3. mysql優(yōu)化 - mysql EXPLAIN之后怎么看結(jié)果進行優(yōu)化 ?4. JavaScript事件5. docker gitlab 如何git clone?6. golang - 用IDE看docker源碼時的小問題7. javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標?8. css3 - css怎么實現(xiàn)圖片環(huán)繞的效果9. css3 - border-bottom 的長度可否超過盒子的寬度呢?實現(xiàn)如下圖效果。(我的書下面的線)10. 我在centos容器里安裝docker,也就是在容器里安裝容器,報錯了?
