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
安装 Vue Router：在终端中执行以下命令进行安装：
npm install vue-router引入 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)
})在模板中使用路由：在模板中使用 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
安装 Vue Router Next：在终端中执行以下命令进行安装：
npm install vue-router@4引入 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')在模板中使用路由：在模板中使用 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 的使用方法和技巧，建议参考官方文档或相关教程。