首页 > web前端 > js教程 > vue-router进行build时不显示路由页面怎么处理

vue-router进行build时不显示路由页面怎么处理

php中世界最好的语言
发布: 2018-03-28 17:14:33
原创
2280 人浏览过

这次给大家带来vue-router进行build时不显示路由页面怎么处理,处理vue-router进行build时不显示路由页面的注意事项有哪些,下面就是实战案例,一起来看一下。

使用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>
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Vue的路由权限管理

解决vue2.0路由不显示router-view的问题

以上是vue-router进行build时不显示路由页面怎么处理的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板