vue2和vue3中路由的区别和写法？

前言：

Vue 2 和 Vue 3 中路由的主要区别在于使用的路由库不同。在 Vue 2 中，通常使用 Vue Router 作为路由库；而在 Vue 3 中，Vue Router 仍然是官方推荐的路由库，但也可以选择使用新的路由库 - Vue Router Next。

下面分别介绍在 Vue 2 和 Vue 3 中使用 Vue Router 的路由写法：

Vue 2 中使用 Vue Router

1. 安装 Vue Router：在终端中执行以下命令进行安装：

npm install vue-router

2. 引入 Vue Router 并配置路由：在 main.js 中引入 Vue Router，并配置路由规则和组件对应关系。示例代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'Vue.use(VueRouter)const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
]const router = newVueRouter({routes // 等价于 routes: routes
})newVue({el: '#app',router,render: h =>h(App)
})

3. 在模板中使用路由：在模板中使用 router-link 组件来实现路由跳转，router-view 组件用于显示对应的组件内容。示例代码如下：

<template><div id="app"><nav><router-link to="/">Home</router-link><router-link to="/about">About</router-link></nav><router-view></router-view></div>
</template>

Vue 3 中使用 Vue Router Next

1. 安装 Vue Router Next：在终端中执行以下命令进行安装：

npm install vue-router@4

2. 引入 Vue Router Next 并配置路由：在 main.js 中引入 Vue Router Next，并配置路由规则和组件对应关系。示例代码如下：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import App from './App.vue'
const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
]const router = createRouter({history: createWebHistory(),routes
})const app = createApp(App)
app.use(router)
app.mount('#app')

3. 在模板中使用路由：在模板中使用 router-link 组件来实现路由跳转，router-view 组件用于显示对应的组件内容。示例代码如下：

<template><div id="app"><nav><router-link to="/">Home</router-link><router-link to="/about">About</router-link></nav><router-view></router-view></div>
</template>

总结：

总体来说，在使用 Vue Router 方面，Vue 2 和 Vue 3 的写法类似，但是在具体细节上还是有所差异。如果需要更深入地了解 Vue Router 的使用方法和技巧，建议参考官方文档或相关教程。