vue 3种路由如何切换路由模式
时间: 2023-11-07 14:18:00 浏览: 53
Vue有三种路由切换模式,分别是hash模式、history模式和abstract模式。下面我会详细介绍每种模式的使用方法:
1. Hash模式:
在hash模式下,路由会通过URL的hash部分来切换页面。URL中以“#”开头的部分被称为hash,当hash发生变化时,路由会做相应的切换。
在Vue中使用hash模式的路由,只需在创建Vue实例时,通过`mode`参数设置为'hash'即可。
例如:
```javascript
const router = new VueRouter({
mode: 'hash',
routes: [...]
})
```
2. History模式:
History模式会使用浏览器的History API来切换路由,URL不再需要带有'#'。
在Vue中使用history模式的路由,需要在服务器端进行相应的配置,以保证在刷新页面或直接访问URL时能正确地跳转到对应的路由。
在创建Vue实例时,通过`mode`参数设置为'history'即可。
例如:
```javascript
const router = new VueRouter({
mode: 'history',
routes: [...]
})
```
3. Abstract模式:
Abstract模式并不涉及真实的URL,它会将路由映射到内存中的一个对象,主要用于非浏览器环境,如Node.js服务器端渲染。
在Vue中使用abstract模式的路由,只需在创建Vue实例时,通过`mode`参数设置为'abstract'即可。
例如:
```javascript
const router = new VueRouter({
mode: 'abstract',
routes: [...]
})
```