Vue3项目使用Vue-router4（对比vue2配合Vue-router3）

最新推荐文章于 2024-04-13 07:33:51 发布

NMGWAP

最新推荐文章于 2024-04-13 07:33:51 发布

阅读量577

点赞数

文章标签： vue react typescript babel smarty

本文链接：https://blog.csdn.net/NMGWAP/article/details/125067093

版权

本文对比了Vue2与Vue3中配合Vue-router的不同，主要介绍了Vue-router4在Vue3项目中的使用方法，包括动态路由配置和导航跳转的差异。在Vue2中，路由配置常见于组件内，而在Vue3中，则需通过createRouter和createWebHistory方法创建。Vue3中的导航跳转方式与Vue2不同，需单独引入并使用route对象进行操作。

摘要由CSDN通过智能技术生成

使用脚手架搭建的Vue3项目默认使用的路由版本是4，由于Vue3和Vue2写法差异较大，所以需要从新熟悉Router用法，本篇文章比较下两个版本的写法差异，不做深层次的讲解，主要是我也不懂。

1 Vue2配合Vue-router3

说多了没用，直接上代码

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [{
  path: '/',
  name: '首页',
  component: () =>
    import( /* webpackChunkName: "page" */ '@/views/index'),
  meta: {
    requireAuth: true,
  },
  children: [{
    path: '/index',
    name: '首页',
    component: () =>
      import( /* webpackChunkName: "page" */ '@/views/wel'),
    meta: {
      requireAuth: true,
    }
  }]
}]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

上面这种