vue2 和 vue3 配置路由有什么区别

news2024/9/22 11:35:09

vue2 和 vue3 配置路由有什么区别
- 初始化路由器实例：
- 注入到应用中：
- 动态路由参数和捕获所有路由：
- 编程式导航 API：
- 异步加载组件：
vue2 如何使用路由
- 第一步：安装 vue-router
- 第二步：创建路由组件
- 第三步：配置路由
- 第四步：在主应用入口注册路由
- 第五步：在应用中使用组件导航
vue3 如何使用路由
- 第一步：安装 vue-router
- 第二步：创建路由组件
- 第三步：配置路由
- 第四步：在主应用入口注册路由
- 第五步：在应用中使用组件导航
vue2 和 vue3 配置路由有什么区别

vue2 和 vue3 配置路由有什么区别

Vue 2 和 Vue 3 在配置路由方面存在一些区别，主要体现在以下几个方面：

初始化路由器实例：

Vue 2 中，通过 new Router() 创建路由实例，并传入配置对象。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/', component: Home },
    // ...其他路由配置
  ]
})

Vue 3 中，使用 createRouter 函数创建路由实例，并且需要显式地指定 history 类型，例如 createWebHistory 或 createWebHashHistory。

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    // ...其他路由配置
  ]
})

注入到应用中：

Vue 2 中，在 new Vue() 的选项对象中直接挂载路由实例。

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Vue 3 中，使用 createApp 创建的应用实例上有一个 .use() 方法来注册插件，包括路由。
```
const app = createApp(App)
app.use(router)
app.mount('#app')
```

动态路由参数和捕获所有路由：

Vue Router v4（与Vue 3配合）对通配符路由（catch-all routes）的处理方式有所变化。在 Vue 2 中，可以简单地定义一个星号 (*) 路由作为 catch-all，但在 Vue 3 中必须使用带有自定义正则表达式的参数来实现。

Vue 2:
javascript { path: '*', redirect: '/not-found' }

Vue 3 (with Vue Router v4):
javascript { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFoundComponent }

编程式导航 API：

Vue Router 在 Vue 2 和 Vue 3 中都提供了类似的编程式导航方法如 router.push(), router.replace(), router.go() 等，但它们在 Vue 3 中是作为 router 实例上的方法暴露出来的，而不再依赖于全局的 this.$router。

异步加载组件：

Vue 2 使用 import() 动态导入语法与 component: () => import('./MyComponent.vue') 结合来异步加载路由组件。
Vue 3 继续支持这种方式，但在 Vue Router v4 中提供了更灵活的 loadComponent 配置项以支持异步加载组件。

Vue 3 的路由配置逻辑和 Vue 2 相似，但在实际使用时有一些API调用和细节上的差异，以及对Composition API更好的兼容性。

同时，Vue Router v4 对 Vue 3 的支持也带来了新的特性和最佳实践。

vue2 如何使用路由

在Vue 2中使用路由，首先需要安装vue-router库，并进行基本的配置以设置不同的页面组件与URL路径之间的映射。以下是一个简化的步骤示例：

第一步：安装 vue-router

npm install vue-router@^3 # 确保安装的是Vue 2版本的vue-router
# 或者
yarn add vue-router@^3

第二步：创建路由组件

假设你有两个页面组件 Home.vue 和 About.vue。

// Home.vue
<template>
  <div>Welcome to the Home Page</div>
</template>

// About.vue
<template>
  <div>About this Application</div>
</template>

第三步：配置路由

在项目中创建一个文件（如src/router/index.js）来配置路由：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Home,
      name: 'Home',
    },
    {
      path: '/about',
      component: About,
      name: 'About',
    },
  ],
})

第四步：在主应用入口注册路由

修改src/main.js，确保将创建的路由实例注入到Vue实例中：

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 导入上面创建的路由配置

new Vue({
  router, // 注册路由
  render: h => h(App),
}).$mount('#app')

第五步：在应用中使用 `<router-link>` 组件导航

在任意模板中，比如 App.vue 中，可以使用 <router-link> 来创建链接导航：

<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>

现在当你运行应用程序并点击“Home”或“About”，Vue Router 将会根据定义的路由规则自动切换显示对应的组件内容。

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。

vue3 如何使用路由

在Vue 3中使用路由，你需要安装vue-router@4（与Vue 3兼容的版本），然后进行基本配置以设置不同的页面组件与URL路径之间的映射。以下是一个简化的步骤示例：