189 8069 5689
这篇文章主要介绍了怎么使用VueRouter4.x的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么使用VueRouter4.x文章都会有所收获，下面我们一起来看看吧。
站在用户的角度思考问题，与客户深入沟通，找到灯塔网站设计与灯塔网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站建设、成都网站设计、企业官网、英文网站、手机端网站、网站推广、域名注册、网页空间、企业邮箱。业务覆盖灯塔地区。
Vue Router中存在两种history（记录历史路由），分别是URL.hash和HTML5中提供的History两种。
hash历史记录对于没有主机的Web应用程序（例如file://），或当配置服务器不能处理任意的URL时非常有用，但是hash的SEO非常差劲；
History历史是HTML5中新增的，对于IE来说不是很友好，但是Vue3都放弃IE了，你也就不用考虑IE了；这种方式是目前最常见的一种方式，但是应用程序必须通过http协议被提供服务。
首先我们安装Vue Router，命令如下：
npm i vue-router
然后在main.js中写入如下代码：
import { createApp } from 'vue'
import App from './App.vue'
// 1 引入 createRouter
import { createRouter, createWebHistory } from 'vue-router'
// 2 定义路由映射表
const routes = [
/* more router */
]
// 3 创建路由实例，并传递对应配置
const router = createRouter({
// history 模式 这里使用createWebHistory
history: createWebHistory(),
// 传递路由映射表
routes
})
createApp(App).use(router).mount('#app')上面的代码中的routes如果多的话，可以定义一个router.js文件，将其进行抽离，示例代码如下：
router.js
export default [ /* more router */ ]
main.js
import { createApp } from 'vue'
import App from './App.vue'
// 2 引入路由映射表
import routes from './router'
// 1 引入 createRouter
import { createRouter, createWebHistory } from 'vue-router'
// 3 创建路由实例，并传递对应配置
const router = createRouter({
// history 模式 这里使用createWebHistory
history: createWebHistory(),
// 传递路由映射表
routes
})
createApp(App).use(router).mount('#app')或者**直接在****router.js中直接导出一个路由实例，在main.js**中使用即可（这种方式更常用）。
，因为改变URL后会重新加载页面而
