Vue3 project – configure routing and sidebar navigation bar

Configuring routing and sidebar navigation in a Vue3 project can be done in the following steps:

Configuration process

1. Install Vue Router

First, make sure your Vue3 project has Vue Router installed. If it is not installed, you can execute the following command in the project root directory to install it:

npm install vue-router@next

2. Create routing file

Create a new folder under the src directory, named router, and then create a new file under this folder, named index.js. In this file, you can define your routing configuration.

import {<!-- --> createRouter, createWebHistory } from 'vue-router'

// import your component
import Home from '../views/Home.vue'
//...
import About from '../views/About.vue'

const routes = [
  {<!-- -->
    path: '/',
    name: 'Home',
    component: Home
  },
  // ...other routing configuration
  {<!-- -->
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({<!-- -->
  history: createWebHistory(),
  routes
})

export default router

In the above example, we defined two routes: Home and About, and specified the corresponding components for each route.

3. Using routing in Vue applications

In your Vue application’s main entry file (usually main.js), you need to import and use the router object.

import {<!-- --> createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

In the above example, we imported the router object and used the app.use() method to register the router object into the Vue application.

4. Create a sidebar navigation bar component

In your Vue project, you can create a sidebar navbar component that displays routing navigation links. In this component, you can use the router-link component provided by Vue Router to generate routing links.

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <!-- More routing links -->
  </div>
</template>

<script>
export default {
  // component logic
}
</script>

<style>
/* component style */
</style>

In the above example, we use the router-link component to generate two routing links: one pointing to the Home route and one pointing to the About route. You can add more routing links according to your needs.

5. Introduce the sidebar navigation bar component in the main component

In your main component, you can add a sidebar navigation bar component to the page layout to display navigation links in the page.

<template>
  <div>
    <Sidebar /> <!-- Introduce the sidebar navigation bar component -->
    <router-view /> <!-- Render the currently active routing component -->
  </div>
</template>

<script>
import Sidebar from './components/Sidebar.vue'

export default {
  components: {
    Sidebar
  },
  // component logic
}
</script>

<style>
/* component style */
</style>

In the above example, we use the tag to add the sidebar navigation bar component to the page layout, and then use the tag to Renders the currently active routing component.

So far, you have completed the configuration of routing and sidebar navigation in the Vue3 project. You can add more routes in the route configuration file as needed, and generate corresponding route links in the sidebar navigation bar component.

Use the sidebar component top bar component (navigation bar) in the element-puls component library

To use the sidebar and topbar components of the Element Plus plugin in a Vue3 project, you can follow the steps below:

1. Install Element Plus

First, make sure your Vue3 project has Element Plus installed. If it is not installed, you can execute the following command in the project root directory to install it:

npm install element-plus

2. Create a sidebar component

In your Vue project, you can create a sidebar component that displays a sidebar navigation bar. In this component, you can use the el-menu and el-menu-item components provided by Element Plus to generate the navigation bar.

<template>
  <el-menu :default-active="activeIndex" mode="vertical" @select="handleMenuSelect">
    <el-menu-item index="1">Navigation bar item 1</el-menu-item>
    <el-menu-item index="2">Navigation bar item 2</el-menu-item>
    <!-- More navigation bar items -->
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleMenuSelect(index) {
      this. activeIndex = index
      // Handle the navigation bar item click event
    }
  }
}
</script>

<style scoped>
/* component style */
</style>

In the above example, we use the el-menu component to generate a vertical mode navigation bar, and use the el-menu-item component to generate two navigation bar items . You can add more navbar items according to your needs.

3. Create a top bar component

In your Vue project, you can create a top bar component, which is used to display the top navigation bar. In this component, you can use the el-menu and el-menu-item components provided by Element Plus to generate the navigation bar.

<template>
  <el-menu :default-active="activeIndex" mode="horizontal" @select="handleMenuSelect">
    <el-menu-item index="1">Navigation bar item 1</el-menu-item>
    <el-menu-item index="2">Navigation bar item 2</el-menu-item>
    <!-- More navigation bar items -->
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleMenuSelect(index) {
      this. activeIndex = index
      // Handle the navigation bar item click event
    }
  }
}
</script>

<style scoped>
/* component style */
</style>

In the above example, we use the el-menu component to generate a horizontal navigation bar, and use the el-menu-item component to generate two navigation bar items . You can add more navbar items according to your needs.

4. Introduce sidebar and topbar components in the main component

In your main component, you can add sidebar and topbar components to the page layout to display the navigation bar in the page.

<template>
  <div>
    <Sidebar /> <!-- Import sidebar component -->
    <Topbar /> <!-- Import the top bar component -->
    <MainContent /> <!-- introduce the main content component -->
  </div>
</template>

<script>
import Sidebar from './components/Sidebar.vue'
import Topbar from './components/Topbar.vue'
import MainContent from './components/MainContent.vue'

export default {
  components: {
    Sidebar,
    Top bar,
    MainContent
  },
  // component logic
}
</script>

<style>
/* component style */
</style>

In the above example, we used the and tags to add the sidebar and topbar components to the page layout. You can place the sidebar and topbar components in suitable positions according to your needs.

5. Style customization

You can style the sidebar and topbar according to your needs. Element Plus provides a series of CSS classes that you can use to modify the styles of the sidebar and topbar. You can check out the Element Plus documentation for more information on sidebar and topbar styles.

The above is a detailed description of using the sidebar and topbar components of the Element Plus plugin in the Vue3 project. You can add more navbar items in the sidebar and topbar components as needed, and customize the styles of the sidebar and topbar.