使用vue cli創(chuàng)建一個(gè)webpack工程

加入vue-router然后使用路由引入一個(gè)新的組件。這時(shí)路由和鏈接是這樣寫的

const router = new VueRouter({ mode: 'history', base: __dirname, routes: [ {  path: '/first',  component: firstCom } ]})

<a href="/first" rel="external nofollow" >Try this!</a>

1、npm run dev查看沒(méi)有問(wèn)題

2、npm run build打包

3、起一個(gè)服務(wù)（例如：python -m SimpleHTTPServer）然后查看index.html頁(yè)面，發(fā)現(xiàn)路由會(huì)請(qǐng)求/first頁(yè)面。

4、解決的辦法：將路由配置中history改為hash，將鏈接中/first改為/#/first。問(wèn)題解決。

============2017.8.24更新================

又找了點(diǎn)資料發(fā)現(xiàn)，其實(shí)router的mode使用history是可以的。是我在做跳轉(zhuǎn)的時(shí)候出現(xiàn)了問(wèn)題。我想當(dāng)然的使用了window.location.href=”“,其實(shí)應(yīng)該使用router.push。代碼里面的handleSelect是因?yàn)槭褂昧薳lement ui出現(xiàn)的一個(gè)消息處理方法。可以理解為當(dāng)按鍵點(diǎn)擊時(shí)觸發(fā)該方法，如果按鍵的key是2，那么跳轉(zhuǎn)到first，key是3跳轉(zhuǎn)到second。

<script> export default { data () {  return {  } }, methods: {  handleSelect(key, keyPath) {  if (key == 2){   this.$router.push('first');  } else if (key == 3){   this.$router.push('second');  }  } } }</script>

以上這篇解決vue-router進(jìn)行build無(wú)法正常顯示路由頁(yè)面的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持錯(cuò)新站長(zhǎng)站。