解决vue-router进行build无法正常显示路由页面的问题
更新时间：2018年03月06日 14:25:57 作者：xgbm_k
下面小编就为大家分享一篇解决vue-router进行build无法正常显示路由页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用vue cli创建一个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、起一个服务（例如：python -m SimpleHTTPServer）然后查看index.html页面，发现路由会请求/first页面。
4、解决的办法：将路由配置中history改为hash，将链接中/first改为/#/first。问题解决。
============2017.8.24更新================
又找了点资料发现，其实router的mode使用history是可以的。是我在做跳转的时候出现了问题。我想当然的使用了window.location.href=”“,其实应该使用router.push。代码里面的handleSelect是因为使用了element ui出现的一个消息处理方法。可以理解为当按键点击时触发该方法，如果按键的key是2，那么跳转到first，key是3跳转到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无法正常显示路由页面的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在ElementUI中树形控件本身不支持单选功能,本文就来介绍一下如何实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-06-06
Vue 中 template 有且只能一个 root的原因解析(源码分析)
这篇文章主要介绍了Vue 中 template 有且只能一个 root的原因解析,本文从源码角度分析给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
本篇文章主要介绍了Vee-Validate的使用方法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
下面小编就为大家分享一篇vue获取当前点击的元素并传值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
EPUB.js是一个基于JavaScript的库,用于从电子书中提取内容,这篇文章主要为大家详细介绍了vue如何使用epubjs实现电子书的功能,感兴趣的小伙伴可以学习一下2023-11-11
这篇文章主要介绍了vue中.$mount('#app')手动挂载操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了Vue3 列表界面数据展示，文章主要详介绍的内容就是做的就是把打到页面的数据，带样式，也就是说好看点显示,需要的朋友可以参考一下2021-11-11
这篇文章主要给大家介绍了关于vue-router二级导航切换路由及高亮显示的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
van-picker组件default-index属性设置不生效踩坑及解决
这篇文章主要介绍了van-picker组件default-index属性设置不生效踩坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要为大家介绍了vue 批量自动引入并注册组件或路由实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
最新评论