解决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的动画类 Fx.js
Nov 05 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
javascript中alert()与console.log()的区别
Aug 26 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
JS实现的视频弹幕效果示例
Aug 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
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
python输出指定月份日历的方法
2015/04/23 Python
详解Python中的变量及其命名和打印
2016/03/11 Python
深入浅析Python中的yield关键字
2018/01/24 Python
django加载本地html的方法
2018/05/27 Python
python使用thrift教程的方法示例
2019/03/21 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
几个Shell Script面试题
2014/04/18 面试题
职工趣味运动会方案
2014/02/10 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
支行行长岗位职责
2015/02/15 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android