javascript - vue的router-link報(bào)錯(cuò)不顯示
問題描述
我用vue-cli搭建好了目錄,但是用router-link做單頁路由沒有成功,不知道哪里有問題求解,本人剛進(jìn)坑
app.vue
<template> <p id='app'> <headers></headers> <p class='tap'><p class='tab-item'> <router-link :to='/Goods'>第一項(xiàng)</router-link></p><p class='tab-item'> <router-link to='/Ratings'>第二項(xiàng)</router-link></p><p class='tab-item'> <router-link to='/Seller'>第三項(xiàng)</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 }})
其中一個(gè)單頁,其他都基本一致
<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'>第一項(xiàng)</router-link></p><p class='tab-item'> <router-link to='/Ratings'>第二項(xiàng)</router-link></p><p class='tab-item'> <router-link to='/Seller'>第三項(xiàng)</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. 在mac下出現(xiàn)了兩個(gè)docker環(huán)境2. css3 - css怎么實(shí)現(xiàn)圖片環(huán)繞的效果3. android - 用textview顯示html時(shí)如何寫imagegetter獲取網(wǎng)絡(luò)圖片4. javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標(biāo)?5. css - 定位為absolute的父元素中的子元素 如何設(shè)置在父元素的下面?6. JavaScript事件7. javascript - jquery hide()方法無效8. 網(wǎng)頁爬蟲 - 用Python3的requests庫模擬登陸B(tài)ilibili總是提示驗(yàn)證碼錯(cuò)誤怎么辦?9. 注冊(cè)賬戶文字不能左右分離10. html - vue項(xiàng)目中用到了elementUI問題
