This is the first day of my participation in Gwen Challenge

This article has participated in the weekend study program, click to see more details

What is vue-router?

Official website: router.vuejs.org/zh/

Vue Router is an official route manager for vue. js (opens New Window). Its deep integration with vue.js core makes building single-page applications a breeze. Features include:

  1. Nested routing/view chart
  2. Modular, component-based routing configuration
  3. Route parameters, queries, and wildcards
  4. View transition effect based on vue. js transition system
  5. Fine-grained navigation control
  6. Links with automatically activated CSS classes
  7. HTML5 historical mode or Hash mode is automatically degraded in IE9
  8. Custom scroll bar behavior

Second, the actual development process

Before, we have used ant-design-Vue in the framework. Based on this, we set up a background management system. Through the following steps, we can use vue-Router in the project.

1. Write the Layout page

Layout page is our layout page, in addition to the login page and 404 page, the rest of the page is based on its re-development, is our public page. Create a layout directory in the View file and create the index.vue file in the directory

<a-layout id="layout">
    <a-layout-sider id="layout_sider">Sider</a-layout-sider>
    <a-layout>
      <a-layout-header>Header</a-layout-header>
      <a-layout-content>
        <router-view></router-view>
      </a-layout-content>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>
  </a-layout>
Copy the code

After writing the index.vue file, we need to modify the main.ts file

2. How to use the Layout component of Ant-design-Vue on the page

Here we need to do two things, import and use. The reason for import is that we use on-demand reference when using, and re-reference when using, to avoid the bloat of our project.

How to import and use:

import { Button, Layout } from 'ant-design-vue'
const plugins = [Button, Layout]
plugins.forEach(p= > app.use(p))
Copy the code

Now you can use the Layout component on your page. But we can’t see it on the page so far. Our router is not configured yet.

3. Configure the index.ts file under the router file

Let’s start with our layout file. The code is as follows:

import LayOut from '.. /views/layout/index.vue'
Copy the code

The configuration of a route is static and dynamic. The configuration of a route is static and dynamic. We will also use this parameter later.

{
    path: '/home'.name: '/home'.component: LayOut,
    redirect: '/home/index'.children: [{path: 'index'.component: () = > import('.. /views/Home.vue'),
        meta: {
          title: 'home'.icon: 'snippets'}}, {path: 'about'.component: () = > import('.. /views/About.vue'),
        meta: {
          title: 'about'.icon: 'snippets'}}}]Copy the code

In route, we treat each page as an object, and this object can nest its child objects, namely child routes. The general parameters of the object are path, name, Component, Redirect, and children. These are the parameters we often use. You can browse through the information to see how it is configured.

Once configured, we can access a page through the router. For example: http://localhost:8080/home/index

If you can see this, the configuration is successful. If not, check out the code base on my code cloud and compare. Any questions are welcome.

How to display route link automatically on the page

To do this, you need to use the Menu component and the route property.

The Menu component is used.

Import the Menu component in main.ts

import { Button, Layout, Menu, Icon } from 'ant-design-vue'
const plugins = [Button, Layout, Menu, Icon]
Copy the code

Then use it in the page. The specific code can be found in ant-design-vue.

The route of using the

We take all the parameters of route, and we iterate through them, changing name to name and path to path.

<a-menu mode="inline" theme="dark" :inline-collapsed="collapsed" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys">
      <a-sub-menu v-for="(items, indexs) in $router.options.routes" :key="indexs">
        <template #title>
          <span>
            <MailOutlined />
            <span>{{ items.name }}</span>
          </span>
        </template>
        <a-menu-item v-for="(item, index) in items.children" :key="indexs + index">
          <router-link :to="items.path + '/' + item.path">
            {{ item.meta.title }}
          </router-link>
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
Copy the code

So now we can actually see our navigation on our page.

If you see the above code, it means that our configuration is successful. The code base is in:Gitee.com/niuny/vue3/…You can compare them.

3. Use dynamic Router

To be continued…