Use of Vue3 pages, menus, and routes

1. Click on the menu to jump

1. Unify page naming
2. Add management page
3. Add routes
4. Bind the route in the menu

2. Actual Effect

1. Click on the menu to jump

1. Unify page naming

We first unify the page names and use lowercase, change Home and About pages to lowercase, and then modify index.ts in router .

The sample code is as follows:

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/home.vue'
import About from '../views/about.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    //Lazy loading made me delete it}
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

2. Add management page

Create a page called admin-ebook.vue under views/admin .

The sample code is as follows:

<template>
  <div class="about">
    <h1>E-book management page</h1>
  </div>
</template>

3. Add routes

Modify index.ts content in router again.

The sample code is as follows:

import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'
import Home from '../views/home.vue'
import About from '../views/about.vue'
import AdminEbook from '../views/admin/admin-ebook.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/admin/admin-ebook',
    name: 'AdminEbook',
    component: AdminEbook
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

4. Bind the route in the menu

We modify it in the header, the sample code is as follows:

<template>
    <a-layout-header class="header">
      <div class="logo" />
      <a-menu
          theme="dark"
          mode="horizontal"
          :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="/">
          <router-link to="/">Home</router-link>
        </a-menu-item>
        <a-menu-item key="/admin/admin-ebook">
          <router-link to="/admin/admin-ebook">E-book management page</router-link>
        </a-menu-item>
        <a-menu-item key="3">
          <router-link to="/about">About Us</router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-header>
</template>

<script lang="ts">
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'TheHeader',
});
</script>

Knowledge points:

Use router-link to redirect, as shown below: <router-link to="/"> Home </router-link>

2. Actual Effect

Recompile and start, as shown below:

This is the end of this article about the use of Vue3 pages, menus, and routes. For more information about the use of Vue3 pages, menus, and routes, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Detailed explanation of vue3 cache page keep-alive and unified routing processing
Vue3.0 combined with bootstrap to create a multi-page application
Vue3.0 implements the encapsulation of the drop-down menu
Vue3+TypeScript implements a complete example of a recursive menu component
Detailed explanation of the difference between routing hooks in Vue2.x and Vue3.x
A simple example of using Vue3 routing VueRouter4
Vue2/vue3 routing permission management method example

<<: Example of implementing a seamless infinite loop of background using CSS animation

>>: Analyze the duration of TIME_WAIT from the Linux source code