current position:Home>Vue. Nested routing in router and four ways of jump

Vue. Nested routing in router and four ways of jump

2022-01-26 23:36:57 huxiaoxiao.

Nested Route ( Also called Nested sub routing ) Nested Route --- It is usually composed of multiple nested components .

1:router-view Subdivision of

router-view In the first floor , Contains a router-view

2: Every pit has been dug , To correspond to individual components

Routing configuration

routes: [
            {
                path:'/menu',
                name:'menu',
                component:menu,
                // Add this attribute to route nesting 
                children:[
                    // Configure nested sub routes here 
                    {},
                    {},
                    {}
                ]
            }
        ]

After entering the home page, there will be a main navigation , home page 、 Information Center 、 Customer Stories , About us , Take the news center as an example :


1. First, write two basic routes, jump home page and News Center , The results are as follows :

 2. When declaring two subcomponents , For the nested sub routing under the News Center

 let One = {
            template:`#one`
        }
 let Two = {
            template:`#two`
        }

  Write content on the view layer

<template id="one">
        <div>
            <h1> Industry news </h1>
        </div>
    </template>
    <template id="two">
        <div>
            <h1> Company news </h1>
        </div>
    </template>

3. First in Written in the routing object our Nested Route ( Sub route )children:[]    Configure the routing object ,

Whose sub route is it , Write under whose configuration rules

 routes:[
                {
                    path:'/index',
                    name:'Inedx',
                    component:Index
                },
                {
                    path:'/news',
                    name:'News',
                    component:News,
                    children:[
                        {
                            //  First write the road strength of the parent, followed by the road strength of the child route 
                            path:'/news/one',
                            //  The name is also , Who's the next sub route , So use the parent to point to its child routes 
                            name:'News.One',
                            component:One
                        },
                        {
                            path:'/news/two',
                            name:'News.Two',
                            component:Two
                        }
                    ]
                }
            ]

4. To the template in the component ( View layer ) in , Jump through the tag , Set it up ( Set in the view layer of the parent route )

On the view level , There are four ways , Can access Corresponding components under nested routes !!!

(1)

<template id="news">
        <div>
            <h1> Information Center </h1>
            <router-link to="/news/one"> Sub route 1</router-link>
            <router-link to="/news/two"> Sub route 2</router-link>
            <router-view></router-view>
        </div>
    </template>

(2)

<template id="news">
        <div>
            <h1> Information Center </h1>
            <router-link :to="{name:'News.One',path:'/news/one'}"> Sub route 1</router-link>
            <router-link :to="{name:'News.Two',path:'/news/two'}"> Sub route 2</router-link>
            <router-view></router-view>
        </div>
    </template>

(3) The second method is as long as name, Don't path

<template id="news">
        <div>
            <h1> Information Center </h1>
            <router-link :to="{name:'News.One'}"> Sub route 1</router-link>
            <router-link :to="{name:'News.Two'}"> Sub route 2</router-link>
            <router-view></router-view>
        </div>
    </template>

(4) The second method is as long as path, Don't name

<template id="news">
        <div>
            <h1> Information Center </h1>
            <router-link :to="{path:'/news/one'}"> Sub route 1</router-link>
            <router-link :to="{path:'/news/two'}"> Sub route 2</router-link>
            <router-view></router-view>
        </div>
    </template>

See the effect :

copyright notice
author[huxiaoxiao.],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201262336545522.html

Random recommended