SoFunction
Updated on 2025-04-05

Implementation code of vue custom tags and single page multi-routing

1. Customize component labels (such as inserting the top bar/sidebar on the home page, etc.)

For example,insertShown in: Definition, and thenofscriptImport in

import vHead from "./"; 
 #Import as vHead, pay attention to the path,and
Used under the same path./

Then export the components:

export default {
 components: {
  vHead,
 }
 };

Then inof<template>It is directly inserted into the device and used:

<vHead></vHead>

2. Single-page multi-routing implementation

Single-page multi-routing means displaying the content of different routes on the same page, and setting it toSubroutineway, then through<router-view></router-view>, as the insertion point for the subroutine. When accessing the corresponding route, the route content will be rendered to the <router-view></router-view> location.

For example:Show on the pageWait for pages:

1. By setting./router/On the routechildrenProperties, set toSubroutine

const routes = [ 
 {
 path: '/',
 name: 'home',
 component: () =&gt; import('../components/common/'), #Note the reference path children: [
 {
  path: '/homedesk',
  name: 'homedesk',
  component: () =&gt; import('../components/page/') #Note the reference path },}]

2. InAdd the corresponding location of the page<router-view></router-view>, access the corresponding route/homedeskWhen the route content is rendered toCorresponding location.

This is the article about vue custom tags and single-page multi-routing implementation. For more related vue custom tags, single-page multi-routing content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!