A router-view is used to create a router-view.

The router – view is introduced

  • Router-view router view router view router view router view router view router view router view router view router view router view
  • Let’s start with a rendering
img

Usage details:

  • First download vue-Router, and mount, here will not go into detail, Baidu a bunch of
  • We need a home page with a Router-View as the display page
  • You then need a couple of sub-pages to display in a router-view on the main page

In the code

  • Home page: app.vue,
<template> <div id="app"> <router-view></router-view> <router-link :to="{name:'H1'}">H1 page </router-link> <router-link : to = {name: "' the H2}" > H2 page < / router - the link > < / div > < / template >Copy the code

Summary: Here is the main page, the contents to be displayed in the sub-page will be displayed in the router-view tag, the router-link tag is to control the router-view to display the route of the page, : to means to click to display, here can display the corresponding pages of the three route names H1 and H2

  • Default display page
<template> <div class="hello"> <img src="./assets/logo.png"> <h1>{{ msg }}</h1> <router-view></router-view> <div> </div>  </div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script>Copy the code

This page will be displayed in the router-view of app. vue, and our child pages will be displayed in the router-view of this page

  • Click on H1,H2 shown here
//h1 <template> <div class="hellow"> <h1>{{msg}}</h1> </div> </template> <script> export default { data() { return { MSG :' I am h1'}} } </script> //h2 <template> <div class="hellow"> <h1>{{msg}}</h1> </div> </template> <script> export default { data() { Return {MSG :' I am h2'},} </script>Copy the code

Summary: These are the two normal presentation pages, which are equivalent to what you want to show in your project

Super key, configure the routing file

 routes: [

    {

      path: '/'.

      name: 'HelloWorld'.

      component: HelloWorld,

      children: [{

        path:'h1'.

        name:'H1'.

        component:H1

}, {

        path:'h2'.

        name:'H2'.

        component:H2

      },

    ]

    }

  ]

Copy the code

Summary: First, when the path is /, display our default display page Helloworld, and then notice that we have a children here, indicating that these pages are children of the Helloworld page, and these pages will be displayed in the router-view of the Helloworld page in the future. So a router-view in a page is used to show the child routes under the page route,

Conclusion:

Nesting routines are divided into several cores as a whole:

  • Route configuration page, set the default route, and then where you want to write nested routes, write child routes in this route

  • The child routing jump and its presentation, router-link, help us navigate the child routing page to be displayed in the router-view

    If there are still do not understand the place, can private message, insufficient place welcome to point out, thank you