解決vue-router進(jìn)行build無法正常顯示路由頁面的問題
使用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查看沒有問題
2、npm run build打包
3、起一個(gè)服務(wù)（例如：python -m SimpleHTTPServer）然后查看index.html頁面，發(fā)現(xiàn)路由會(huì)請(qǐng)求/first頁面。
4、解決的辦法：將路由配置中history改為hash，將鏈接中/first改為/#/first。問題解決。
============2017.8.24更新================
又找了點(diǎn)資料發(fā)現(xiàn)，其實(shí)router的mode使用history是可以的。是我在做跳轉(zhuǎn)的時(shí)候出現(xià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無法正常顯示路由頁面的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
elementUI Tree 樹形控件單選實(shí)現(xiàn)示例
在ElementUI中樹形控件本身不支持單選功能,本文就來介紹一下如何實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
Vue 中 template 有且只能一個(gè) root的原因解析(源碼分析)
這篇文章主要介紹了Vue 中 template 有且只能一個(gè) root的原因解析,本文從源碼角度分析給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
本篇文章主要介紹了Vee-Validate的使用方法詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
vue獲取當(dāng)前點(diǎn)擊的元素并傳值的實(shí)例
下面小編就為大家分享一篇vue獲取當(dāng)前點(diǎn)擊的元素并傳值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
EPUB.js是一個(gè)基于JavaScript的庫,用于從電子書中提取內(nèi)容,這篇文章主要為大家詳細(xì)介紹了vue如何使用epubjs實(shí)現(xiàn)電子書的功能,感興趣的小伙伴可以學(xué)習(xí)一下2023-11-11
vue中的.$mount(''#app'')手動(dòng)掛載操作
這篇文章主要介紹了vue中.$mount('#app')手動(dòng)掛載操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue3 列表界面數(shù)據(jù)展示，文章主要詳介紹的內(nèi)容就是做的就是把打到頁面的數(shù)據(jù)，帶樣式，也就是說好看點(diǎn)顯示,需要的朋友可以參考一下2021-11-11
vue-router二級(jí)導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue-router二級(jí)導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
van-picker組件default-index屬性設(shè)置不生效踩坑及解決
這篇文章主要介紹了van-picker組件default-index屬性設(shè)置不生效踩坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue?批量自動(dòng)引入并注冊(cè)組件或路由實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了vue?批量自動(dòng)引入并注冊(cè)組件或路由實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07