Vue 路由基本使用：实现简洁侧边栏

前端

2023-12-17 20:04:30

在 Vue.js 中，路由是管理应用程序不同页面和视图的核心功能之一。通过，我们可以轻松地在组件之间导航，并根据 URL 保持应用程序状态。本篇文章将通过一个简易的侧边栏实现示例，带你了解 Vue 路由的基本使用。

简介

侧边栏是 Web 应用程序中一种常见的导航元素，它通常位于页面的左侧或右侧，提供对不同页面或功能的快捷访问。通过使用 Vue 路由，我们可以动态创建和管理侧边栏菜单，并根据用户的操作更新当前页面。

代码实现

要实现一个简单的侧边栏，我们需要在 Vue 应用程序中创建以下组件：

App.vue：应用程序根组件
Sidebar.vue：侧边栏组件
Home.vue：主页组件
About.vue：关于页面组件

App.vue

<template>
  <div id="app">
    <Sidebar />
    <router-view />
  </div>
</template>

<script>
import Sidebar from './Sidebar.vue';
import Home from './Home.vue';
import About from './About.vue';

export default {
  components: { Sidebar, Home, About },
};
</script>

Sidebar.vue

<template>
  <ul>
    <li><router-link to="/">Home</router-link></li>
    <li><router-link to="/about">About</router-link></li>
  </ul>
</template>

<script>
export default {
  name: 'Sidebar',
};
</script>

Home.vue

<template>
  <h1>Home Page</h1>
</template>
</script>

About.vue

<template>
  <h1>About Page</h1>
</template>
</script>

路由配置

在 main.js 文件中，我们需要配置 Vue Router 路由：

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 router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
});

export default router;