In the actual project, we will encounter the combination of multi-layer nested components , But how do we implement nested routing ?
It's very simple , Just need us to be here VueRouter Is used in the children to configure , In this way, routing nesting can be well implemented .
Here is the sample code ：
index.html, There is only one routing exit
<div id="app"> <!-- router-view Routing exit , The components that the route matches will be rendered here --> <router-view></router-
view> </div>
main.js, Route redirection , When the page is loaded , It will home Components are displayed , Because the redirection points to home assembly ,redirect The direction and direction of path We have to be consistent .children It's a sub route , Of course, the embedded sub route can be continued in the sub route .
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
// Two components are introduced import home from "./home.vue" import game from "./game.vue" // Define route
const routes = [ { path: "/", redirect: "/home" },// redirect , Point to home assembly { path:
"/home", component: home, children: [ { path: "/home/game", component: game } ]
} ] // Create routing instance const router = new VueRouter({routes}) new Vue({ el: '#app', data:
{ }, methods: { }, router })
home.vue, Click Show to display the sub route in the , The exit of a child route must be in the parent route , Otherwise, the sub route cannot be displayed .
<template> <div> <h3> home page </h3> <router-link to="/home/game"> <button> display <tton> </
router-link> <router-view></router-view> </div> </template>
game.vue
<template> <h3> game </h3> </template>
current game Components are home The child of the component is routed . If you want to continue nesting game China and Canada children That's it .
Technology