【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',
		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'

// 导入路由页面的配置
import routes from './routes'

// 路由参数配置
const router = createRouter({
    // 使用hash(createWebHashHistory)模式，(createWebHistory是HTML5历史模式，支持SEO)
    history: createWebHistory(),
    routes: routes,
})

// 全局前置守卫，这里可以加入用户登录判断
router.beforeEach((to, from, next) => {
    // 继续前进 next()
    // 返回 false 以取消导航
    next()
})

// 全局后置钩子，这里可以加入改变页面标题等操作
router.afterEach((to, from) => {
    const _title = to.meta.title
    if (_title) {
        window.document.title = _title
    }
})

// 导出默认值
export default router

新建routes文件存放页面路径：

const routes = [
    {
        path: '/',
        name: 'index',
        title: '首页',
        component: () => import('@/components/index.vue'), //.vue不能省略
    }
]
export default routes

5.路径别名配置

以上方法使用中会出现问题，不能识别@，所以我们需要配置别名

首先安装 @types/node

npm install --save @types/node

在vite.config.js中添加以下代码：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
	resolve: {
    	alias: {
			'@': path.resolve(__dirname, 'src'),
		}
	},
	plugins: [vue()]
})

二、vue2使用router

1.安装router

npm install vue-router@4

2.创建router文件夹

在index.js中进行配置

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

// 导入 vue-router 依赖
Vue.use(VueRouter);

export default new VueRouter({
		routes: [{
			path: '/', // 跳转路径
			name: 'main1', // 名称
			component: () => import('@/views/main1.vue'),
			// 子路由
			children: [{
					path: '/home', // 跳转路径
					name: 'home', // 名称
					component: () => import('@/views/home.vue') // 组件
				},
				{
					path: '/user', // 跳转路径
					name: 'user', // 名称
					component: () => import('@/views/user.vue') // 组件
				},
			],
		}]

	
})

3.在main.js中进行注册

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

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