vue2 和vue3d的vue router区别

在Vue2和Vue3中，Vue Router的用法和特性有一些区别。

1. 安装方式：在Vue2中，安装Vue Router的命令是`npm i vue-router@3.5.2 -S`，而在Vue3中，安装Vue Router的命令是`npm i vue-router@4.0.11 -S`。引用

2. 初始化方式：在Vue2中，我们需要在`router/index.js`中手动创建路由实例对象，并将其导出。示例代码如下：

// 1. 导入vue和router包
import Vue from 'vue'
import VueRouter from 'vue-router'

// 2. 调用Vue.use()函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter)

// 3. 创建路由的示例对象
const router = new VueRouter()

// 4. 向外共享路由示例对象
export default router

在Vue3中，初始化路由的方式有所改变，我们需要使用`createRouter`函数来创建路由实例对象，并将其作为参数传递给`createApp`函数。示例代码如下：

// 1. 导入vue和router包
import { createApp } from 'vue'
import { createRouter } from 'vue-router'

// 2. 创建路由的示例对象
const router = createRouter()

// 3. 创建Vue应用，并将路由实例对象作为参数传递
const app = createApp(App)
app.use(router)

// 4. 挂载Vue应用
app.mount('#app')

引用

3. 参数传递方式：在Vue Router中，参数传递有两种方式，分别是query和params。在Vue2和Vue3中，这两种方式的使用和区别是相同的。params是通过路由路径中的占位符进行传递，而query是通过URL中的查询参数进行传递。具体的使用和区别可以参考引用中提供的文章。

总结来说，Vue2和Vue3的Vue Router在安装方式和初始化方式上有所区别，但在参数传递的使用和区别上是相同的。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue2---路由（router以及vue-router）](https://blog.csdn.net/qq_61950936/article/details/126179822)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [vue router使用query和params传参的使用和区别](https://download.csdn.net/download/weixin_38655990/12769572)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]