vue的路径为什么有# • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

Vue.js是一种用于构建用户界面的JavaScript框架，它实现了单页应用的开发模式。在Vue.js中，路径中的#符号称为哈希符号（hash symbol），它被用于实现客户端路由。

那么为什么Vue.js的路径中要包含#呢？

防止页面刷新：使用#符号可以阻止浏览器刷新页面。在传统的Web开发中，页面刷新会导致重新加载整个页面，而在单页应用中，我们希望只是更新部分页面内容而不会刷新整个页面。通过在路径中加入#符号，Vue.js可以截获浏览器对URL的请求，然后根据不同的路由展示相应的页面内容，而不会导致整个页面的刷新。
实现前端路由：前端路由是指在单页应用中通过改变URL来切换页面内容。通常情况下，URL的改变会触发浏览器向后端发送请求，然后后端返回相应的页面内容。然而，在单页应用中我们希望在浏览器前端直接切换页面内容，而不是向后端发送请求。通过使用#符号，Vue.js可以在URL中加入路径信息，然后通过监听#后面的内容来切换页面。
兼容性考虑：在早期的浏览器中，URL中的#符号是用于定位页面中的锚点的。当页面中存在#后面带锚点名称的链接时，浏览器会自动将页面滚动到对应的位置。为了避免与锚点的功能冲突，Vue.js选择使用#符号来标识前端路由。

总结：Vue.js中路径中包含#符号主要是为了防止页面刷新、实现前端路由以及兼容早期浏览器。通过监听#符号后面的内容，Vue.js可以根据路径切换页面内容，而不会导致整个页面的刷新。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Vue中的路径为什么会有 # 是因为 Vue 默认使用的是哈希模式（hash mode）来管理路由。在哈希模式中，URL中会出现 # 符号，后面跟随的是路由的路径。

避免与服务器路由冲突:
在单页应用中，前端会负责处理路由，而后端服务器只负责返回一个入口页面，对于服务器来说，无论是哪个路由请求，返回的都是同一个页面。为了避免前端路由和后端路由的冲突，使用哈希模式可以确保前端路由不会被识别为后端路由。
支持浏览器的回退和前进功能:
使用哈希模式可以保证浏览器的回退和前进功能正常使用。当路由发生变化时，URL的哈希部分会变化，但页面不会重新加载，所以在点击浏览器的后退或前进按钮时，可以恢复到之前的页面状态。
兼容性较好:
哈希模式相对于其他路由模式，兼容性更好。几乎所有的浏览器都支持哈希模式，无论是新的浏览器还是旧的浏览器，都可以正常运行。
部署简单:
使用哈希模式进行路由，对于部署来说更加简单。因为在哈希模式中，只需将入口页面放置在服务器上，其他路由的请求都会被拦截，在前端进行处理。
可以在URL中进行路由传参:
在哈希模式中，可以在URL的哈希部分中添加参数，实现路由传参的功能。这样可以在不同的页面之间传递数据，实现更加灵活的页面跳转和数据传递。

总结来说，Vue中使用哈希模式作为默认的路由模式，主要是为了解决服务器路由冲突问题，同时兼顾浏览器的回退和前进功能，并且具备良好的兼容性和简单的部署方式。

1年前 0条评论

worktile

Worktile官方账号

在Vue中，路径的#符号通常用于Hash模式的路由。

Hash路由的原理：
在HTML5之前，浏览器的URL中的锚点（即#后面的内容）是用来定位页面特定位置的。而Hash路由通过监听URL中#后面的变化，来根据不同的Hash值切换不同的页面内容，实现前端路由的效果。
例如：http://example.com/#/home

配置Hash模式的路由：
在Vue中，默认使用的是Hash模式的路由。我们可以通过Vue Router库来配置和管理路由。

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About },
  // ...
];

const router = new VueRouter({
  mode: 'hash', // 使用Hash模式
  routes,
});

new Vue({
  router,
}).$mount('#app');

Hash模式的优点和缺点：
- 优点：
  - 兼容性好，支持在所有现代浏览器中运行；
  - 不需要后端服务器支持，可以直接部署在静态服务器上；
  - 简单且易于实现。
- 缺点：
  - URL中会出现#符号，不够美观；
  - 锚点的改变不会触发浏览器的重新加载，所有页面切换都是在前端处理的；
  - 不支持浏览器的前进和后退操作。
可以使用history模式代替Hash模式：
在Vue的路由配置中，可以使用history模式代替Hash模式，以去除URL中的#符号和实现更加美观的URL。历史模式需要后端的支持，并且要避免服务端路由返回404错误。
```
const router = new VueRouter({
  mode: 'history', // 使用History模式
  routes,
});
```

总结：Vue中的路径带有#的情况通常是使用Hash模式的路由。Hash模式的路由兼容性好，不需要后端服务器支持，但URL中会出现#符号。如果不想要#符号并且需要浏览器的前进和后退操作，可以使用history模式代替Hash模式。

1年前 0条评论