去掉vue地址栏中分隔#问题

你需要开启HTML5 History 模式vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。const router = new VueRouter({  mode: ‘history‘,  routes: [...]})

这种配置需要配合后端服务器的配置,如果你对服务器是nginxlocation / {  try_files $uri $uri/ /index.html;}
时间: 2024-08-07 10:11:04

去掉vue地址栏中分隔#问题的相关文章

vue2开发中如何去掉地址栏中的#号

在vue项目的开发中,对于新手的我们,进入项目文件夹后,在文件夹 的如图所示位置: 输入cmd调出dos命令窗口,然后开始输入npm run dev命令运行 如图 (红色部分为项目存放路径)按enter键开始启动node服务器 运行成功,然后可以在浏览器中输入localhost:8080(端口号可以自己设置)访问. 这是我们可以看到地址栏中有个#号,可是在实际访问地址的经验中真的没有见过带#号的: 那么我们应该如何去掉地址栏中的#号,使我们的url看起来是一个正常的url:很简单按照如下设置:

VUE使用params隐藏参数,不在地址栏中显示传的参数

VUE跳转页面传值 地址栏显示传值或者不显示地址栏传值a页面传值到b页面params 传参 : 相当于post请求,页面跳转时参数不会在地址栏中显示 this.$router.push({ name:'', params: { id:idParams } }) 接收参数:this.$route.params.id query 传参 : 相当于get请求,页面跳转时参数会在地址栏中显示 this.$router.push({ name:'', query: { id:idParams } }) 接

vue组件中使用iframe元素

需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul> <li v-for="item in webAddres

JS去掉url地址中的一个参数

在工作的过程中总遇到奇奇怪怪的问题,比如,我需要在打开某一个页面时,去掉地址栏中的一个参数,以下是一大神写给我的JS代码: <script> var currentUrl = window.location.href; var targetUrl = currentUrl.replace(/\/shi/, ""); window.location.href = targetUrl; </script> var targetUrl = currentUrl.rep

在 React、Vue项目中使用 SVG

在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再进行裁切展示. 而实际上,这些简单的小图标完全没必要让美工来做,前端完全可以通过 svg使用代码把这些简单的图标画出来,并且,因为这些图标是用代码描述出来的,所以如果想要修改这些图标,例如改变图标的颜色.图标的形状.大小等,都只是改几行代码的事情,非常简单,根本无需美工返工重做. 本文不是阐述如何利

vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题

Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </

vue 项目中当访问路由不存在的时候默认访问404页面

前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在最后添加一个path: * ,优先级从上到下查找路由,都没有的时候全部指向 404页面 ,代码如下: const baseRoute = [ { path: '/login', name: 'login', component: Login }, {path: '/', redirect: '/in

vue项目中导出PDF的两种方式

参考大家导出的方式,基本上是如下两种: 1.使用 html2Canvas + jsPDF 导出PDF, 这种方式什么都好,就是下载的pdf太模糊了.对要求好的pdf这种方式真是不行啊! 2.调用浏览器自身的方法.window.print() 来打印(打印时可选下载),这种方式打印出来很清楚,但纯在浏览器兼容问题. 谷歌浏览器比较好用点. 两种导出pdf清晰度对比: --------------左边 html2canvas + jspdf:-----------------------------

VScode设置vue文件中保存自动格式化代码以及settings.json文件的配置。

最近在做vue 项目中,由于安装有代码检测工具ESlint,每次写完代码后就发现很多语法警告,查找配置好多也有许些小问题,现记录一份settings.json配置文件. 1.设置如下: 2.settings.json文件配置如下: { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #每次保存的时候