vue3 vue-router集成使用

最新推荐文章于 2025-03-13 02:00:00 发布

ঞ᭄阿້໌ᮩ莲໌້ᮨꦿ

最新推荐文章于 2025-03-13 02:00:00 发布

阅读量424

点赞数

分类专栏： web vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_41241504/article/details/125801362

版权

web 同时被 2 个专栏收录

35 篇文章

订阅专栏

vue

17 篇文章

订阅专栏

本文介绍了如何在Vue3项目中集成并使用vue-router，包括安装路由、创建router文件夹及index.js配置、在main.js中挂载路由对象，以及在App.vue中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装路由

npm i vue-router

2.新建router文件夹在里面新建一个index.js文件

3.刚刚在router中的index.js配置

注意：路由自行配置

import { createRouter, createWebHistory } from 'vue-router'
const routerHistory = createWebHistory()
const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/',
            component: () => import('../components/HelloWorld.vue')
        }, {
            path: '/aa',
            component: () => import('../view/aa.vue')
        }, {
            path: '/bb',
            component: () => import('../view/bb.vue')
        }
    ]
})
export default router

4.在main.js将路由对象，挂载到 Vue 实例上:

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

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

5.使用App.vue

<template>

	<div id="app">
		<!-- 导航 -->
		<router-link to="/" active-class="current" replace>Home</router-link> |
		<router-link to="/aa" active-class="current" replace>aa</router-link> |
		<router-link to="/bb">bb</router-link>
		<!-- 路由出口 -->
		<router-view />
	</div>
</template>

<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
</style>