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

Posted 2023-03-15 尔嵘

前言：

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 的使用方法和技巧，建议参考官方文档或相关教程。