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

时间: 2018-04-09阅读: 738标签: vue

在使用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

vue2.0之监听属性的使用心得及搭配计算属性的使用

在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助

vue路由传参主要的3种方式

vue中路由传参主要的3种方式:query方式(push时使用path来匹配)、params模式(push时使用name来匹配)、location预声明参数模式(push使用path来匹配,但是它跟params模式不同)

解决使用vue.js未渲染前代码显示问题

在使用vue的时候,偶然发现多次刷新或者网络加载缓慢的时候,会一瞬间出现设置的模板的情况。实在很影响美观,可以使用vue现成的指令来解决这个问题:v-cloak

vue之nextTick全面解析

vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时,我们经常用到一个方法是this.$nextTick

vue中数据更新变化,而页面视图未渲染的解决方案

在使用vue的时候,我们都知道它是双向数据绑定的,但是在使用不熟的情况下,经常会遇到:data中的数据变化了,但是并没有触发页面渲染。下面就整理一些出现这种情况的场景以及解决办法。

Vue组件中prop属性使用说明

props 把数据传给子组件!prop是组件数据的一个字段,期望从父作用域传下来。子组件需要显式地用 props 选项。props的大小写、静态的和动态的 Prop、传入一个数字、传入一个布尔值、Vue的组件中的props属性单向数据流

Vue常用经典开源项目汇总参考-海量

本文主要是收集与整理Vue相关的开源资料,以供需要的朋友参考。主要包含以下几方面的内容:UI组件、开发框架、实用库、服务端、辅助工具、应用实例、Demo示例

vue引用js文件的多种方式

vue引用js文件的多种方式,这里以为引入jquery为例。js引入文件方式包括: vue-cli webpack全局引入jquery、vue组件引用外部js的方法、单vue页面引用内部js方法

vue router的使用_vue路由的相关知识

Vue中的路由根据用户在网页中的点击,将其引导到对应的页面。安装vue-router,路由使用包括:嵌套路由、动态路由、编程式路由、路由重定向

Vue中的scoped及穿透方法

由于scoped看起来很美好,但是含有很多的坑,所以,不推荐不使用scoped属性,而通过在外层dom上添加唯一的class来区分不同组件。这种方法既实现了类似于scoped的效果,又方便修改各种第三方组件的样式,代码看起来也相对舒适