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

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

article 2025/1/23 21:37:33

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 时，应用会根据路由配置渲染相应的组件。
在这里插入图片描述