解决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>

以上这篇解决vue-router进行build无法正常显示路由页面的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue router路由嵌套不显示问题的解决方法
  • vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
  • vue-router路由参数刷新消失的问题解决方法
  • Vue.js路由vue-router使用方法详解
赞 (0)

相关推荐

  • vue-router路由参数刷新消失的问题解决方法

    场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})传给主页组件,并在主页显示数据.但是刷新页面后,数据就消失了. 解决方案: 1.session&服务器渲染 传统的方案是,登录页和主页是单独的两个页面,登录成功后服务器生成用户信息对应的session,然后渲染主页数据,并通过响应头将sessionid传给浏览器并生成相应的cookie文件.这样下次请求页面时,浏览

  • vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in

  • vue router路由参数刷新消失问题的解决方法

    场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})传给主页组件,并在主页显示数据.但是刷新页面后,数据就消失了. 解决方案: 1.session&服务器渲染 传统的方案是,登录页和主页是单独的两个页面,登录成功后服务器生成用户信息对应的session,然后渲染主页数据,并通过响应头将sessionid传给浏览器并生成相应的cookie文件.这样下次请求页面时,浏览

  • Vue.js路由vue-router使用方法详解

    Vue.js路由vue-router使用方法详解

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每个示例都有乞丐版,前5个示例有皇帝版. 乞丐版是将所有代码混杂在一起的HTML页面,皇帝版是基于vue-w

  • 解决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

  • 解决vue router组件状态刷新消失的问题

    场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})跳转到主页,并在主页显示数据.但是当刷新页面时,由于并不是通过登录接口进入主页,router中没有'params: res.data'信息,主页无法获取到登录信息. 解决方案: 1.session&服务器渲染 传统的方案是,登录页和主页是单独的两个页面,登录成功后服务器生成用户信息对应的session,然后渲染主页

  • 解决vue router使用 history 模式刷新后404问题

    因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是真实存在的路径,所以刷新就会返回404错误. 想要history模式正常访问,还需要后台配置支持.要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面. 也就是在服务端修改404错误页面的配置路

  • 快速解决Vue项目在IE浏览器中显示空白的问题

    vue项目在IE浏览器中显示空白,是因为js文件没有加载,需要引入babel-polyfill这个东西,而用vue脚手架搭建的项目是没有引入此工具的 引入方法: 打开packge.json,在dependencies中加入:"babel-polyfill" : "^6.23.0" 然后重新npm install 在App.vue文件中import:import  "babel-polyfill" 这样IE浏览器就显示正常了. 以上这篇快速解决Vu

  • 解决vue+router路由跳转不起作用的一项原因

    如下所示: Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: Login }, { path: '/login', component: Login }, { path: '/register',component: Register}, {path: '/*', component: NotFound}, ] }) 记得要写上 mode:'history',

  • Vue router/Element重复点击导航路由报错问题及解决

    Vue router/Element重复点击导航路由报错问题及解决

    目录 Vue router/Element重复点击导航路由报错 解决方法如下 Vue使用element-UI路由报错问题 报错代码 修改方案 Vue router/Element重复点击导航路由报错 虽然此报错并不会影响项目运行,但是作为一个强迫症的码农的确受不了error 解决方法如下 方法1:在项目目录下运行 npm i vue-router@3.0 -S 将vue-router改为3.0版本即可: 方法2:若不想更换版本解决方法 在router.js中加入以下代码就可以 记住插入的位置 c

  • 解决Vue在封装了Axios后手动刷新页面拦截器无效的问题

    项目类型:vue+vux+axios 刚开始,把Axios封装在了http.js文件里面,然后为了使用VUX的提示框消息,把拦截器直接写在了main.js里面.直接调用接口,一切正常. 然而因为返回值有统一的code错误代码提示,所以在拦截器里面加入了code的判断以便统一返回值.刚开始一切都是按照预期的结果来走的.就在一个夜黑风高的晚上,我头晕眼花的按F5手动刷新了一下页面,惊奇的发现拦截器失效了,并没有拦截外面的Coode Json代码层,而是直接把服务器的全部json数据劈头盖脸的砸在了我

  • vue router下的html5 history在iis服务器上的设置方法

    vue router下的html5 history在iis服务器上的设置方法

    首先先照搬下官网的介绍 当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看! 不过这种模式要玩好,还需要后台配置支持.因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了. 所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个index.html 页面,

  • 解决vue打包项目后刷新404的问题

    vue打包项目后刷新404的问题Nginx配置 server { listen 80; server_name localhost; index index.html; root /root/dist; location / { root /root/dist; try_files $uri $uri/ /index.html =404; } } 以上这篇解决vue打包项目后刷新404的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vu

  • vue router路由嵌套不显示问题的解决方法

    vue router路由嵌套不显示问题的解决方法,具体内容如下 路由嵌套,vue2.0 router中嵌套路由不成功,如何解决? 我先说下我的需求,例如下图 我本来是想打算将中间的模块做一层子路由(test模块),模块代码没错,每次编译都正常好使. 但是打开编译后的文件之后,一直都是==只能渲染一级路由,子路由没有效果,==,查了一推资料. 帖子说:子路由多写了/, 会默认从根目录开始匹配,我试着也删除掉这些东西,但是后来发现,我的问题并不是这个原因造成的,原因在于,在子模块里面引用子路由,也是

随机推荐