去掉Vue项目启动默认url地址里的#符号

最新推荐文章于 2024-05-05 08:48:00 发布

→_→BéLieve

最新推荐文章于 2024-05-05 08:48:00 发布

阅读量4.1k

点赞数 2

分类专栏： workStudy 文章标签： vue-router Vue

本文链接：https://blog.csdn.net/weixin_46099269/article/details/123670860

版权

96 篇文章 2 订阅

订阅专栏

问题描述

Vue项目启动的时候浏览器访问地址为http://localhost:8080/#/，想去掉路由地址里面的#符号

解决方法

在new VueRouter里面加上mode: "history"，有两种写法

const router = new VueRouter({
  mode: "history",
  routes,
});

当浏览器输入不存在的路由地址时你可以做个重定向，重定向到你想展示给用户的页面，此处就设置如果URL输入错误或者是URL 匹配不到任何静态资源，就自动跳到到Home页面。点击查看使用文档

{
  path: "/",
  redirect: "/Home",
},

问题分析

vue 里面路由有两种显示模式是hash和history，默认是hash

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据。
由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: ‘history’",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

关注