解决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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
JavaScript 函数式编程的原理
Oct 16 Javascript
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
原生js二级联动效果
Jun 20 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
vue interceptor 使用教程实例详解
Sep 13 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
zend framework多模块多布局配置
2011/02/26 PHP
PHP使用数组实现队列
2012/02/05 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
python常量折叠基础知识点讲解
2021/02/28 Python
同程旅游英文网站:LY.com
2018/11/13 全球购物
寄语十八大感言
2014/02/07 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技