Through the above description, I have basically explained the new features of VUE 3.0, as well as the development and use methods. I didn’t like the fact that the Demo had several pages, so I created a menu for my Demo code, and I’m going to describe it here.

Rebuild the SRC /router/index.js file

In the original code, I only wrote path and Component parameters for a single route. Here, we add the meta parameter and set the title attribute. The relevant codes are as follows:

// Build our page routing configuration, and you can see that this is the same as the original writing.
const routes = [
  {
    path: '/'.component: Home,
    meta: { title: 'Home page - Responsive Data Counter Demo'}}, {path: '/about'.component: (a)= > import('@/views/About.vue'),
    meta: { title: 'About us - Responsive object data Demo'}}, {path: '/life'.component: (a)= > import('@/views/Life.vue'),
    meta: { title: 'Life cycle Demo'}}, {path: '/computed'.component: (a)= > import('@/views/Computed.vue'),
    meta: { title: 'Calculate property Demo'}}, {path: '/parent'.component: (a)= > import('@/views/Parent.vue'),
    meta: { title: 'General Component Demo'}}, {path: '/father'.component: (a)= > import('@/views/Father.vue'),
    meta: { title: 'Function component Demo'}}]Copy the code

Ok, with the above configuration, we have the basic data we need.

Write menu function components

To use the Menu as a function component, we create a new SRC /components/ menu.js file and enter the following:

// Import routes
import router from '@/router'
// Export as a function
export default() = > {// Use getRoutes() to get all the routing information
  const routes = router.getRoutes()
  const links = []
  // Loop the routing information, collating and pushing the data into the Links array
  routes.forEach((route, index) = > {
    links.push({
      name: route.meta.title || ` unnamed${index}`.link: route.path
    })
  })
  // Return the links array
  return links
}
Copy the code

We can obtain all the configured routing information through the getRoutes() function provided by vue-Router, and print the data as shown in the figure below:

As we can see from the figure above, the data structure is quite complex. But we make a navigation menu, there is no need to use such complicated data. So, I wrote a forEach loop above to sort through the data and return it.

Rewrite SRC/app. vue to introduce menu function components

Cut the crap, on the code:

<template>
  <! - the menu - >
  <ul>
    <li v-for="item in menus">
      <router-link :to="item.link">{{ item.name }}</router-link>
    </li>
  </ul>
  <! Routing view -->
  <router-view />
</template>
<script>
// Introduce the Menu component
import Menu from '@/components/Menu.js'

export default {
  setup () {
    // Get menu data and return
    const menus = Menu()
    return {
      menus
    }
  }
}
</script>
Copy the code

Not very elegant, to be honest. In fact, it can also be done differently, that is, the above menu. js can be written as a vUE common component, and then here just reference registration and use.

Here we go. Here we go:

As shown in the image above, we already have navigation menus on each of our pages.

This article by FungLeo original, permission to reprint, but must retain the first link.

The vue3.0 Composition API overhand experience “at the beginning of article directory address: blog.csdn.net/fungleo/cat… I will add some related content irregularly, welcome to pay attention to subscribe!

Article code repository github.com/fengcms/vue… If you know how to use Git, you can download my code directly. Of course, give me a point star what, also not impossible ha!