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

更新日期: 2018-04-09阅读量: 5729标签: 路由

在使用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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

vue动态加载路由_实现vue动态加载路由器设置

我们的通用的后台管理系统中,我们会根据权限的粗细不同,会对每个角色每个权限每个资源进行控制。同样的我们也需要实现一个这样的功能。 这篇文章我将主要讲vue端的实现,关于后台接口我就不会涉及,当我接触的时候我们的后台接口是springcloud实现。

vue 路由模式hash和history的区别

给个警告,因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回index.html文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。

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

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

小程序多种路由跳转的区别

从Anjular转换到微信小程序,从功能丰富,便捷操作的WebStorm转换到十分难用,不是很人性的微信开发者工具,一开始真的特别不适应,也许是心理作用吧,从一开始就觉得它不好用,后来也是写不下去,后来调整心态,说试试看吧,后来就是越写越顺手

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

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

js实现哈西路由原理

在 js 中,有一种方法,可以在不刷新页面的情况下,页面的内容进行变更,ajax 是一种,这里介绍另一种,就是 哈希路由原理,先看一个简单的路由和页面内容关联的例子,要实现两个功能:

前端路由(history+hash)

在传统网站开发中,我们一般使用比如asp、php、jsp等技术进行开发,开发完成后统一部署在服务器上,我们访问时,会在浏览器中发送带有.asp,.php,.jsp等后缀路径的url请求,服务器会根据对应的路由映射表

vue-router 导航守卫中 next 控制实现

使用 vue-router 的导航守卫钩子函数,某些钩子函数可以让开发者根据业务逻辑,控制是否进行下一步,或者进入到指定的路由。

vue 动态添加路由

最近在研究权限的相关东西,自然动态加载路由信息少不了。接下来我就来专门记录下我研究的东西。先后端代码返回一个对象,用java写的,返回的是对象,不是字符,如果是字符前端注意转换成对象。

Vue路由守卫之路由独享守卫

路由独立守卫,顾名思义就是这个路由自己的守卫任务,就如同咱们LOL,我们守卫的就是独立一条路,保证我们这条路不要被敌人攻克(当然我们也得打团配合)

点击更多...

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