vue路由history模式_如何去除vue项目中的#

时间: 2018-04-09阅读: 5368标签: 路由

在使用vue-cli搭建的环境中,浏览器上URL地址中是存在'#'的,这是由于vue-router 默认 hash 模式,不难发现#的出现真的很丑陋。官网给出了如何使用history模式,例如:

const router = new VueRouter({
  mode: 'history',
})


对于VUE的router[mode: history]模式在开发的时候,一般都不出问题。是因为开发时用的服务器为node,Dev环境中自然已配置好了。但对于放到nginx下运行的时候,自然还会有其他注意的地方。总结如下:

在nginx里配置了以下配置后, 可能首页没有问题,链接也没有问题,但在点击刷新后,页面就无法显示了(404)

location /{
        root   /data/nginx/html;
        index  index.html index.htm;
}


为了解决404,需要通过以下两种方式:
方式一

    location /{

        root   /data/nginx/html;
        index  index.html index.htm;

        error_page 404 /index.html;
    }

方式二

    location /{

        root   /data/nginx/html;
        index  index.html index.htm;

        if (!-e $request_filename) {
            rewrite ^/(.*) /index.html last;
            break;
        }
    }

方式三或者使用官方try_files 来指定index.html

location / {
  try_files $uri $uri/ /index.html;
}


此外,如果VUE应用没有发布在域名的目录根下,比如[http://xxx.com/wx/]。那么除了上述配置:

    location /wx{
        root   /data/nginx/html;
        index  index.html index.htm;
        #error_page 404 /wx/index.html;
        if (!-e $request_filename) {
            rewrite ^/(.*) /wx/index.html last;
            break;
        }
    }

还应该在VUE项目里把每个路径加上[/wx]这一段(或者指定base: '/wx/'),要不页面会显示为空白。


来源:https://segmentfault.com/a/1190000010151973

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/607

vue 基于abstract 路由模式 实现页面内嵌

abstract 是vue路由中的第三种模式,本身是用来在不支持浏览器API的环境中,充当fallback,而不论是hash还是history模式都会对浏览器上的url产生作用,本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面

为你的 React 应用创建路由

通常,当用户在浏览器中键入 URL 时,会向服务器发送 HTTP 请求,然后服务器检索 HTML 页面。对于每个新URL,用户会被重定向到新的 HTML 页面。你可以通过参考下图来更好地理解路由的工作原理。

实现一个前端路由,如何实现浏览器的前进与后退?

如果要你实现一个前端路由,应该如何实现浏览器的前进与后退 ?首先浏览器中主要有这几个限制,让前端不能随意的操作浏览器的浏览纪录:没有提供监听前进后退的事件。

实现vue-router部分功能

为了了解路由的底层工作原理,自己参考资料,仿写了vue-router的部分功能。当然自己写的DEMO功能较粗糙,主要实现核心功能,其它功能有待完善、补充。

vue 路由及按钮权限控制 思路总结

前端路由是全部都由后端返回,还是后端返回对应角色下的权限,然后前端通过遍历的方式来修改当前路由呢?第一种后台返回路由,第二种后台返回权限。

从了解Hash和Html5 History 到简单实现路由

hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分),在页面中的hash有多种功能意义:浏览器读取到hash之后自动滚动到该对应元素所在位置的可视区域内

优化vue-router路由管理

本文启发自实际项目中,随着项目不断增长,页面越来越多,不得不把vue-router的路由管理化繁为简、逐渐自动化的一个过程,希望能引发大家的思考;

如何制作自己的原生 JavaScript 路由

当你想到路由时,通常会想到类似 React 之类的库。但实际上,这些库和框架仍然使用 vanilla JavaScript。那么该怎么实现呢?我遇到了很多出于各种原因想要自己创建路由的人。

Flutter 如何在切换页面的时候,把参数传到下一个页面?

讲解Flutter 路由传递,这是一个大的概述图。当 app 的页面变多的时候,就需要考虑页面传值的问题,在第一个页面如何把数据传递到 另外一个页面?最最基本的方法是在打开新页面,传递参数过去。但当 app 变得很大或者功能变多

vue中路由按需加载的几种方式

使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,webpack在打包的时候会把整个路由打包成一个js文件,如果页面一多,会导致这个文件非常大,加载缓慢

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!