解决vue-router进行build无法正常显示路由页面的问题


Posted in Javascript onMarch 06, 2018

使用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无法正常显示路由页面的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中利用数组实现的循环队列代码
Jan 24 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
javascript arguments使用示例
Dec 16 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 Javascript
解决vue打包项目后刷新404的问题
Mar 06 #Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 #Javascript
vue使用xe-utils函数库的具体方法
Mar 06 #Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 #jQuery
angular4 JavaScript内存溢出问题
Mar 06 #Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 #Javascript
vue中本地静态图片路径写法
Mar 06 #Javascript
You might like
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
如何获得PHP相关资料
2006/10/09 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
angular.element方法汇总
2015/01/07 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
javascript每日必学之循环
2016/02/19 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
浅谈Python的异常处理
2016/06/19 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
PyQt5实现下载进度条效果
2018/04/19 Python
对python周期性定时器的示例详解
2019/02/19 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
计算机工程学院个人求职信
2013/10/05 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
Python Django项目和应用的创建详解
2021/11/27 Python