解决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 相关文章推荐
js left,right,mid函数
Jun 10 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
JavaScript将数组转换为链表的方法
Feb 16 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
利用 window_onload 实现select默认选择
2006/10/09 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
PHP链表操作简单示例
2016/10/15 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
简单的JS多重继承示例
2008/03/13 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
JS随机密码生成算法
2019/09/23 Javascript
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
从django的中间件直接返回请求的方法
2018/05/30 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
python pandas生成时间列表
2019/06/29 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
Python3 合并二叉树的实现
2019/09/30 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
军训的自我鉴定
2013/12/10 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
python 调用js的四种方式
2021/04/11 Python
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android