【vue3】在vue2和vue3项目中Router使用方法汇总

vue2和vue3使用router时有一定的区别，以下将对两种使用方法进行总结

一、vue3使用router

1.安装router

npm install vue-router@4

2.创建router文件夹

在index.js中进行配置

// 导入路由对象
import { createRouter,createWebHistory } from 'vue-router'
// 路径配置 
const routes = [
	{
		path: '/',
		name: 'index',
        redirect:'/home',
		component: () => import('@/pages/index.vue') //.vue不可省略
	}
]

3.在main.js中进行注册

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

const app=createApp(App)
app.use(router)
app.mount('#app')

4.拓展使用

以下为较为完善的使用。

在src目录下新建“router”文件夹，建index.js文件，代码如下：

// 导入router所需的方法
import { createRouter, createWebHistory } from 'vue-router'