解决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 相关文章推荐
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
Feb 20 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 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 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
php截取字符串函数分享
2015/02/02 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中的包和模块实例
2014/11/22 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
Python解析树及树的遍历
2016/02/03 Python
简单谈谈Python中的闭包
2016/11/30 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
python tornado微信开发入门代码
2018/08/24 Python
基于python实现对文件进行切分行
2020/04/26 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
制定岗位职责的原则
2013/11/08 职场文书
职务任命书范本
2014/06/05 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
民事答辩状范本
2015/05/21 职场文书
父母教会我观后感
2015/06/17 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python