Solve the problem that vue router nested routing does not respond

Let's take a look at route. js first

//route.js
const App = () => import('../App.vue');
const Login = () => import('../component/Login.vue');
const Class = () => import('../component/Class.vue');
const CourseList = () => import('../component/CourseList.vue');
const CourseContent = () => import('../component/CourseContent.vue');
 
const routers = [{
  path:'/',
  component:App,
  children:[{
      path:'login',
      component:Login
    },{
      path:'class',
      component:Class
    },
    { 
      path:'course',
      children:[{
          path:'list',
          component:CourseList
        },{
          path:'content',
          component:CourseContent
        }
      ]
       
    },
  ]
}] 

export default routers

When you visit, you find that

http://localhost:8080/#/login

http://localhost:8080/#/class

All normal, but:

http://localhost:8080/#/course/list

http://localhost:8080/#/course/content

They are all 1 blank. Check the elements and find that they are not loaded. Check that there is no/in front of the sub-route, so there is no problem, so eliminate it.

Actually, this is the parent of list. course does not have component, but has componnet, and it needs to have it in this component < router-view > < /router-view > , amended as follows:

{
path:'course',
component:Course
children:[{
path:'list',
component:CourseList
},{
path:'content',
component:CourseContent
}
]
},

Course. vue is as follows:

<template>
<div>
<router-view></router-view>
</div>
</template>

In this way, nesting can be realized. Think about it. In this example, the App component is actually like this. It provides a < router-view > < /router-view > , right?

http://localhost:8080/#/course/list

http://localhost:8080/#/course/content

It's all accessible.

Additional knowledge: 1 pit not displayed for Vue-router sub-routes

Encountered this problem should basically be the same as the situation I encountered, but this problem is very hidden, veteran will not encounter, newcomers can't say clearly, so after climbing the pit, I will mention it.

Parent-child routes are nested, so you cannot skip the parent component and display the child component directly. For example, I have the following index. js: ` `

import Vue from 'vue'
import VueRouter from 'vue-router'

// Introducing two components 
import recomView from '../components/views/ty/recom/view.vue'
import recomEdit from '../components/views/ty/recom/edit.vue'

Vue.use(VueRouter)

// Establish router
const router = new VueRouter({
 mode: 'history',
 routes: [
 {
   path: '/recom',
   children: [
    {
     path: 'view',
     name: 'recomView',
     component: recomView
    },
    {
     path: 'edit',
     name: 'recomEdit',
     component: recomEdit
    }
   ]
  },
  
// Exposure router , export default Modules exposed in the mode can have any name when importing (without conflicts) 
export default router

In one of the components, XXX. vue, I want to import two components, recomView and recomEdit,

<template>
 ... 
<router-view></router-view>
 ... 
</template>

<script>
 ... 
this.$router.push('/recom/view')
this.$router.push('/recom/edit')
 ... 
</script>

However, using index. js above, you will find that it cannot be introduced anyway. The reason is that it skipped the grade when it was introduced. Looking back at the above index. js, there are many inadequacies, and analyze it slowly

Parent route '/recom' does not have a corresponding component, so router-view in XXX. vue does not have a corresponding component, so the place where you want to display recomView or recomEdit on the page will be blank

If you add component at '/recom' at this time, you will find that recomView will be displayed on both routes that you originally pointed to recomView and recomEdit for convenience of directly giving component: recomView

Then the problem is clear, in fact, the given route skips: the parent-child route is a two-layer nested relationship, while router-view in the top component will only point to the parent route here, that is, '/recom', and if you want to point to the child route, you need to nest another layer

At this point, the solution is easy to think of, that is, to establish another component recom. vue corresponding to the parent route, and to introduce router-view once more in recom. vue.

//recom.vue Since I don't need this here '/recom' Page, so introduce it in the simplest way router-view That's enough 
<template>
 <router-view></router-view>
</template>

Is there a simpler method that doesn't need to build recom. vue? Yes.

Direct introduction of const recom in index. js = {template: ` < router-view > < /router-view > `} will do. The amended index. js should look like this:

import Vue from 'vue'
import VueRouter from 'vue-router'

// Introducing two components 
import recomView from '../components/views/ty/recom/view.vue'
import recomEdit from '../components/views/ty/recom/edit.vue'

Vue.use(VueRouter)

// Introduce recom Components! 
const recom = {
 template: `<router-view></router-view>`
}

// Establish router
const router = new VueRouter({
 mode: 'history',
 routes: [
 {
   path: '/recom',
   component: recom,  // Introduce recom, Necessary 
   children: [
    {
     path: 'view',
     name: 'recomView',
     component: recomView
    },
    {
     path: 'edit',
     name: 'recomEdit',
     component: recomEdit
    }
   ]
  },
  
export default router

Is there any other way? There are also. That is, don't use nested routes, just upgrade the child routes to the same level as the parent route. Anyway, you don't need the components corresponding to the parent route here, and then set an redirect for the parent route to point to the page you want to display by default. I believe this will be done, so I won't write it. This is also the way I began to think of, but the above bug did not solve the discomfort in my heart, so I delayed a little time, but fortunately, I barely found the reason.

I feel that JS is a very flexible language. I didn't read any books and started to do web directly. I really need to take time to make up the foundation.