vue.js路由mode配置之去掉url上默认的#方法

2024-10-21 06:16:46

比如： http://localhost:8080/#/login 路由中间默认带有 #

如果需要去掉#，只需将mode的默认值'hash'改为'history'即可。

router.js :

import Router from 'vue-router'
import routers from './routers'

export default () => {
  return new Router({
    routers,
    mode: 'history' // 加上这个配置项，url默认的 # 就不会出现了
  })
}

关于mode说明：

默认值： ‘hash‘(浏览器) 或 ‘abstract‘(node.js)

可选值： ‘hash' | ‘history' | ‘abstract'

hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。

history: 依赖 HTML5 History API 和服务器配置。点击查看官方HTML5 History 模式说明.

abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

以上这篇vue.js路由mode配置之去掉url上默认的#方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

Vue 去除路径中的＃号

在开发过程中发现路径中带有/#/的标示,而且还去不掉,很丑陋. 众所周知,vue-router有两种模式,hash模式和history模式. 带#的则是hash模式. 将router中的mode设置为history就可以了接下来有个问题,界面一刷新,就变404了!!!! 网上搜了下,需要对后端环境进行一个配置. 这里只列举nginx的配置,其他的配置点击这里去官网看先配置config/index.js 修改assetsPublicPath为根目录 module.exports = { bui
vue 项目地址去掉 #的方法

vue-router 设置 history 模式 vue 项目往往会搭配 vue-router 官方路由管理器,它和 vue.js 的核心深度集成,让构建单页面应用变得易如反掌.vue-router 默认为 hash 模式,使用 URL 的 hash 来模拟一个完整的 URL,所以当 URL 改变时,页面不会重新加载,只是根据 hash 来更换显示对应的组件,这就是所谓的单页面应用. 但是使用默认的 hash 模式时,浏览器 URL 地址中会有一个 # ,这跟以往的网站地址不太一样,可能也会让大
Vue路由模块化配置的完整步骤

前言企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由的配置也要模块化分享两个解决方案 -- Vue 路由配置的模块化(Plan A and Plan B) 注册需要首先路由注册需要啥 // main.js new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' }) // 这里的 router 是这样的 export default new Rout
vue.js路由mode配置之去掉url上默认的#方法

比如 : http://localhost:8080/#/login 路由中间默认带有 # 如果需要去掉#,只需将mode的默认值'hash'改为'history'即可. router.js : import Router from 'vue-router' import routers from './routers' export default () => { return new Router({ routers, mode: 'history' // 加上这个配置项,url默认的 #
Vue Router去掉url中默认的锚点#

hash模式url vue-router默认hash模式--使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载. 如果不想要这种默认的hash模式,可以用路由的history模式,这种模式充分的利用history.pushState API来完成URL跳转而无需重新加载页面. index.js Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path:"/xxx&quo
基于vue.js路由参数的实例讲解——简单易懂

vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件首先在我们项目中安装vue-router路由依赖第一种,我们提供命令行来安装 npm install vue-router --save 第二种,我们直接去官方github下载 https://github.com/vuejs/vue-router 路由参数设置 1,实例化一个路由,然后路由映射表中的地址带参数,这个参数就是路由的参数接着给映射表中的路由设
vue.js+element-ui动态配置菜单的实例

如下所示:  <aside :class="collapsed?'menu-collapsed':'menu-expanded'">  <el-menu unique-opened router v-show="!collapsed">  <templ
vue.js路由跳转详解

本文为大家分享了vue.js路由的跳转,供大家参考,具体内容如下 1.路由demo示例 <div id="app"> <h1>Hello App!</h1> <p>    <rout
解决使用vue.js路由后失效的问题

新学了vue.js中的路由在之前写的vue的demo上加上了简单的路由例子(来自vue-router 2),但是加上点击后只有地址栏变化,内容并不变.且之前用jquery写的一些效果也失效了.最后找到原因是因为同一个id被启动了两次(第一次是之前使用vue组件时启动的,另外一个是路由时启动的) 附上部分代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入样式
详解vue.js移动端配置flexible.js及注意事项

前言最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分辨率大小不同,调整根元素html的font-size,从而达到每个元素宽高自动变化,适配不同屏幕 1.安装lib-flexible.js npm install lib-flexible --save 1.在项目入口文件main.js中引入lib-flexible import 'lib-flexi
Vue.js路由实现选项卡简单实例

本文实例为大家分享了Vue.js路由实现选项卡的具体代码,供大家参考,具体内容如下需要实现下图效果,点击上方选项卡,切换到不同内容的组件: 事先准备好两个库文件(vue.js.vue-router.js),放到对应路径. 1.引入依赖库 <script src="vue.js" type="text/javascript" charset="GBK"></script> <script src="vue-
vue 2.8.2版本配置刚进入时候的默认页面方法

vue --version查看版本是 2.8.2: vue 2.8.2版本配置刚进入时候的默认页面比如这里面的goods页面: 1.在路由文件下里面的index.js文件添加 { path: '/', redirect: '/goods/goods' }, // 默认就跳转此页面 2.也可以在app.vue里面配置 this.$router.push('/goods/goods'); // 页面加载时跳转详情看下面 export default { name: 'app', compone
基于vue.js仿淘宝收货地址并设置默认地址的案例分析

这个案例主要是渲染地址列表,然后设置默认地址,与淘宝的收货地址功能一样,具体自行查看自己的淘宝收货地址: 效果图: html结构  <div class="the-address"> <div class="adr-tent" id="vue-address"> <table class="adr-table"> <thead class

vue.js路由mode配置之去掉url上默认的#方法

相关推荐

随机推荐