vuerouter使用真实路由

Vue Router使用真实路由的步骤如下：
第一步：在Vue项目的根目录下，通过命令行安装Vue Router依赖包。
第二步：在main.js文件中引入Vue Router，并将其作为Vue的插件进行注册。
第三步：创建路由组件，即每个路由对应的组件。
第四步：在路由配置文件中配置路由映射关系，即将路径和对应的组件进行映射。
第五步：在Vue实例中创建路由对象，并将路由配置文件中的路由映射关系传入。
第六步：在Vue实例中挂载路由对象。
第七步：在需要使用路由的组件内，使用<router-link>组件来生成链接，使用<router-view>组件来渲染对应的组件。

相关问题

vue 3种路由如何切换路由模式

Vue有三种路由切换模式，分别是hash模式、history模式和abstract模式。下面我会详细介绍每种模式的使用方法：

1. Hash模式：
在hash模式下，路由会通过URL的hash部分来切换页面。URL中以“#”开头的部分被称为hash，当hash发生变化时，路由会做相应的切换。
在Vue中使用hash模式的路由，只需在创建Vue实例时，通过`mode`参数设置为'hash'即可。
例如：

   const router = new VueRouter({
     mode: 'hash',
     routes: [...]
   })

2. History模式：
History模式会使用浏览器的History API来切换路由，URL不再需要带有'#'。
在Vue中使用history模式的路由，需要在服务器端进行相应的配置，以保证在刷新页面或直接访问URL时能正确地跳转到对应的路由。
在创建Vue实例时，通过`mode`参数设置为'history'即可。
例如：

   const router = new VueRouter({
     mode: 'history',
     routes: [...]
   })

3. Abstract模式：
Abstract模式并不涉及真实的URL，它会将路由映射到内存中的一个对象，主要用于非浏览器环境，如Node.js服务器端渲染。
在Vue中使用abstract模式的路由，只需在创建Vue实例时，通过`mode`参数设置为'abstract'即可。
例如：

   const router = new VueRouter({
     mode: 'abstract',
     routes: [...]
   })

vue哈希路由和history路由的区别

Vue中的哈希路由（Hash Router）和History Router的主要区别在于它们处理URL的方式以及浏览器的历史记录管理。

1. **工作原理**:
- **哈希路由**: 使用URL中的`#`符号和查询参数来导航，如`https://example.com/#/users`。刷新页面或点击浏览器回退按钮时，URL不会改变，浏览器地址栏不会更新，但内容会更新。数据变化依赖于前端路由。
- **History Router**: 使用HTML5 History API，改变了历史记录并允许用户直接在浏览器地址栏输入完整的URL（如`https://example.com/users`），页面加载会触发服务器响应或预渲染，刷新或回退时，真正的URL会更新。

2. **浏览器兼容性**:
- **哈希路由**: 更广泛支持旧版浏览器，因为所有现代浏览器都支持`hashchange`事件。
- **History Router**: 需要更新的浏览器支持，尤其是对于`pushState`和`popstate`操作，某些老版本浏览器可能不完全支持。

3. **SEO**:
- **哈希路由**: 对搜索引擎不太友好，因为搜索引擎通常只抓取可见的URL部分，而`#`后的信息不会被抓取。
- **History Router**: 更有利于SEO，因为它能提供更好的用户体验和真实的URL结构，但需要服务器支持URL重定向或者预渲染技术。

4. **SPA应用**:
- **哈希路由**: 更适合单页应用(SPA)，因为它的状态管理和路由控制都在客户端完成。
- **History Router**: 提供更好的用户体验，特别是在SEO方面，但对于大型、需要频繁刷新的项目可能会有性能影响。

综上，选择取决于项目的需求、目标受众的浏览器支持程度以及SEO策略。