解決vue-router進行build無法正常顯示路由頁面的問題
使用vue cli創(chuàng)建一個webpack工程
加入vue-router然后使用路由引入一個新的組件。這時路由和鏈接是這樣寫的
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、起一個服務(wù)（例如：python -m SimpleHTTPServer）然后查看index.html頁面，發(fā)現(xiàn)路由會請求/first頁面。
4、解決的辦法：將路由配置中history改為hash，將鏈接中/first改為/#/first。問題解決。
============2017.8.24更新================
又找了點資料發(fā)現(xiàn)，其實router的mode使用history是可以的。是我在做跳轉(zhuǎn)的時候出現(xiàn)了問題。我想當(dāng)然的使用了window.location.href=”“,其實應(yīng)該使用router.push。代碼里面的handleSelect是因為使用了element ui出現(xiàn)的一個消息處理方法?？梢岳斫鉃楫?dāng)按鍵點擊時觸發(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進行build無法正常顯示路由頁面的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue 3中的defineEmits()和defineProps()使用小結(jié)
defineProps()和defineEmits()是Vue 3中Composition API的重要組成部分,它們分別用于定義組件接收的屬性和觸發(fā)的事件,本文給大家介紹Vue 3中的defineEmits()和defineProps()解析,感興趣的朋友跟隨小編一起看看吧2024-04-04
我們在做項目經(jīng)常會遇到組件功能不能滿足業(yè)務(wù)需求的時候,這時候需要在原有的組件上進行二次封裝,下面這篇文章主要給大家介紹了關(guān)于Vue組件二次封裝的一些實用技巧,需要的朋友可以參考下2022-04-04
今天小編就為大家分享一篇基于element-ui的rules中正則表達式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇Vuejs2 + Webpack框架里,模擬下載的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
隨著人工智能的發(fā)展，圖像識別和人臉識別技術(shù)已經(jīng)被廣泛應(yīng)用于各種應(yīng)用程序中，Vue為我們提供了許多實用工具和庫，可以幫助我們在應(yīng)用程序中進行圖像識別和人臉識別，在本文中，我們將介紹如何使用Vue進行圖像識別和人臉對比,需要的朋友可以參考下2023-06-06
PostCSS 是一個用 JavaScript 編寫的工具,用于將 CSS 轉(zhuǎn)換為另一種 CSS,在做h5頁面的屏幕適配時,結(jié)合 PostCSS 的一些插件能輕松實現(xiàn),下面以結(jié)合 postcss-pxtorem 插件為例,詳細介紹配置步驟,需要的朋友可以參考下2025-02-02
vue3二次封裝element-ui中的table組件的過程詳解
這篇文章主要給大家介紹了vue3二次封裝element-ui中的table組件的過程,文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友跟著小編一起來學(xué)習(xí)吧2024-01-01
這篇文章主要為大家詳細介紹了Vue使用NProgress進度條的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
今天小編就為大家分享一篇基于vue中keep-alive緩存問題的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue?前端?el-input?實現(xiàn)輸入框內(nèi)容始終添加在尾部%的方法
在el-input輸入框的尾部添加%,可以通過suffix或append插槽實現(xiàn),suffix插槽簡單直接,適用于靜態(tài)顯示%,而append插槽更靈活,適用于顯示更復(fù)雜的內(nèi)容,感興趣的朋友跟隨小編一起看看吧2024-12-12