如何去掉vue的url地址中的#号?及其原理?

更新日期: 2022-08-27阅读: 903标签: 路由

如何去掉vue的url地址中的#号?

import Vue from 'vue';

import VueRouter from 'vue-router';

Vue.use(VueRouter)

// 1. 定义一些路由
// 每个路由都需要映射到一个组件。
const routes = [
    { path: '/home', component: ()=> import('../views//home.vue') },
    { path: '/about', component: ()=> import('../views/about.vue') },
]

const router = new VueRouter({
    mode: 'hash',       //默认是hash模式,url是带#号的
    // mode: 'history',     //history模式url不带#号
    routes
  })
  
export default router

hash模式实现原理

hash模式主要是根据url的hash值来跳转不同的路由页面。
采用hash模式的路由模式中,url后面有一个#,#后面包括#就是此路由的hash值,hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件
vue中hash模式的原理就是通过监听hash值的变化来匹配不同的组件,进而来重新渲染视图。

优点

  • 兼容性强,兼容性达到了IE8
  • 除发送ajax和资源请求外不会发送其他多余请求
  • 改变#后的路径、不会自动刷新页面
  • 无需服务端进行配合

缺点

  • 访问路径上包含#,不美观
  • 对于需要锚点功能的需求会与当前路由机制发生冲突
  • 重定向操作时,后段无法获取url完整路径。

监听onhashchange事件案例:

src\views\home.vue

<template>
  <div>
      home
      <button @click="handerHref">跳转</button>
  </div>
</template>
<script>
export default {
  name: 'home',
  data(){
    return {
      
    } 
  },
  created(){
    
  },
  mounted() {
    window.addEventListener('hashchange',this.onhashchange)
  },
  computed:{
    
  },
  methods:{
    handerHref(){
        window.location.href = "http://localhost:8080/#/about"
    },
    onhashchange(e){
        console.log(e.oldURL,'home');
        console.log(e.newURL);
        console.log(location.hash);
    }
  }
}
</script>

<style scoped>

</style>

src\views\about.vue

<template>
  <div>
    about
  </div>
</template>

<script>
export default {
  name: 'about',
  data(){
    return {
      
    } 
  },
  created(){
    
  },
  mounted() {
    window.addEventListener('hashchange',this.onhashchange)
  },
  computed:{
    
  },
  methods:{
    onhashchange(e){
        console.log(e.oldURL,'about');
        console.log(e.newURL);
        console.log(location.hash);
    }
  }
}
</script>

<style scoped>

</style>

history模式实现原理

优点

  • 符合url地址规范, 不需要#, 使用起来比较美观
  • 可以使用history.state获取完整的路由信息
  • 后端可以获取到完整的路由信息

缺点

  • 兼容性只到IE10
  • 改变url路径后、会重新请求资源。
  • 若访问的路由地址不存在时、会报404,需服务端配合支持重定向返回统一的404页面。

history路由中我们使用onpopstate事件函数来监听history路由的变化,但是popstate事件函数只能监听到history.go、forward、back的切换路由方式,但是它不能够监听到pushState添加历史记录(就是在页面中点击某个a标签进行跳转的方式,点击页面顺序:a->b->c,记录的历史记录中a、b、c都存在,而replaceState则不同)、replaceState(点击页面顺序:a->b->c,记录的历史记录中只有a->c,即用c代替了b记录,b记录被删除了)切换路由的方式。

监听popstate、pushState、replaceState事件案例:

src\views\home.vue

<template>
  <div>
      home
      <button @click="handerHref">跳转</button>
  </div>
</template>
<script>
export default {
  name: 'home',
  data(){
    return {
      
    } 
  },
  created(){
    
  },
  mounted() {
    window.addEventListener('hashchange',this.onhashchange)
  },
  computed:{
    
  },
  methods:{
    handerHref(){
      window.location.href = "http://localhost:8080/#/about"
    },
    onhashchange(e){
        console.log(e.oldURL,'home');
        console.log(e.newURL);
        console.log(location.hash);
    }
  }
}
</script>

<style scoped>


</style>

src\views\about.vue

<template>
  <div>
    about
    <button @click="handerBack">返回</button>
  </div>
</template>

<script>
export default {
  name: 'about',
  data(){
    return {
      
    } 
  },
  created(){
    
  },
  mounted() {
    window.addEventListener('hashchange',this.onhashchange)   //hash模式跳转页面触发onhashchange事件
    window.addEventListener("popstate", this.onpopstate)    //popstate事件函数只能监听到history.go、forward、back的切换路由方式,但是它不能够监听到pushState添加历史记录
  
    // 但是它不能够监听到pushState添加历史记录(就是在页面中点击某个a标签进行跳转的方式,点击页面顺序:a->b->c,记录的历史记录中a、b、c都存在,而replaceState则不同)、replaceState(点击页面顺序:a->b->c,记录的历史记录中只有a->c,即用c代替了b记录,b记录被删除了)切换路由的方式
    // 对于pushState、replaceState需要通过函数重写的方式进行劫持,也就是说我们重写pushState和replaceState
    // 但是我们一般都是pushState来跳转链接,是通过this.$router.replace()来触发;而pushState()是通过this.$router.push()来触发
    // 重写pushState方法
    const rawPushState = window.history.pushState
    window.history.pushState = function (...args) {
        rawPushState.apply(window.history, args)
        console.log("终于监视到pushState了");
    }
    // 重写replaceState方法
    const rawReplaceState = window.history.replaceState
    window.history.replaceState = function (...args) {
        rawReplaceState.apply(window.history, args)
        console.log("终于监视到replaceState了");
    }
  },
  computed:{
    
  },
  methods:{
    handerBack(){
       // window.location.reload() //刷新

      // window.history.go(1) //前进

      // window.history.go(-1) //后退

      // window.history.forward() //前进

      // window.history.back() //后退+刷新

      this.$router.replace('/home')
    },
    onhashchange(e){
        console.log(e.oldURL,'about');
        console.log(e.newURL);
        console.log(location.hash);
    },
    onpopstate(e){
      console.log(e,'popstate')
    }
  }
}
</script>

<style scoped>

</style>

hash和history的区别

hash模式的url后跟hash值#…,它的原理就是使用window.onHashChange来监听hash值的改变,一旦发生变化就找出此hash值所匹配的组件,进而将组件渲染到页面中。但是hash模式这种带hash值的url是非常丑的,项目中也很少用hash模式。

history模式中的url是以/user这种格式,比较常见,它的原理是通过window.onpopstate来监听路由变化,进而匹配不同的组件来渲染出来。

链接: https://fly63.com/article/detial/12041

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

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

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

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

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

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

两种前端路由的实现方式

前后端分离开发模式,后端会把路由控制丢在前端,这几天再开发单页面小的项目,手动撸了个路由。前端路由实现有两种方法。HTML5 History API包括2个方法:history.pushState()和history.replaceState(),和1个事件:window.onpopstate。hash + location.onhashchange

vue动态路由_vue-router通过接口请求动态生成路由的实现

在后台管理系统中,一般都会采用权限管理。路由菜单数据都会保存到数据库中,在vue-router 2.2版本新增了一个router.addRoutes(routes)方法,即可用它来实现动态路由了

HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

vue router 路由鉴权(非动态路由)

原本想用动态路由的思路去做,按权限加载对应路由表,但是由于权限可以交叉(比如一个人可以同时是主题管理员和数据服务管理员),导致权限路由表还是得去做判断组合。于是放弃了这个思路,索性就在beforeEach里直接判断了。

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

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

vue-router 中参数传递(params,query)

query和params的区别,query相当于get请求,在页面跳转的时候,可以在地址栏看到请求参数,然而params则相当于post请求,参数不会在地址栏中显示。

Node.js的路由

当服务端接收到HTTP请求时,可以通过onRequest() 获取到url, pathname,query,及paramParams参数;为了解析这些数据需要使用url和querystring模块

点击更多...

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