当前位置：首页 > news >正文

Vue.js 配置路由：基本的路由匹配

news 2025/7/7 19:40:06

Vue.js 配置路由：基本的路由匹配

在 Vue.js 应用中，Vue Router 是官方提供的路由管理器，用于在单页应用（SPA）中管理不同的视图。通过配置路由，应用可以根据 URL 的变化展示相应的组件。

基本的路由匹配是指将特定的路径与对应的组件关联起来，当用户访问该路径时，Vue Router 会渲染相应的组件。

1. 安装 Vue Router

首先，需要安装 Vue Router：

npm install vue-router

在这里插入图片描述

2. 定义路由

在项目中创建一个 router.js 文件，用于定义路由配置：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';Vue.use(VueRouter);const routes = [{ path: '/', component: Home },{ path: '/about', component: About },
];const router = new VueRouter({routes,
});export default router;

在上述代码中，我们定义了两个基本路由：

/：对应 Home 组件。
/about：对应 About 组件。

3. 在主应用中使用路由

在 main.js 中，引入并使用定义的路由：

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

4. 在模板中使用 `router-link` 和 `router-view`

在 App.vue 中，使用 router-link 进行导航，router-view 渲染匹配的组件：

<template><div><nav><router-link to="/">Home</router-link><router-link to="/about">About</router-link></nav><router-view></router-view></div>
</template>

通过上述配置，当用户点击导航链接或直接访问对应的 URL 时，应用会根据路由配置渲染相应的组件。
在这里插入图片描述