vue-router 플러그인 루트가 반응하지 않는 문제를 해결하다

일단 루트부터 볼게요.js

//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

네가 방문했을 때, 발견
http://localhost:8080/#/login
http://localhost:8080/#/class
모두 정상입니다. 하지만:
http://localhost:8080/#/course/list
http://localhost:8080/#/course/content
모두 공백이어서 원소를 검사했는데 불러오지 않았습니다.검사, 하위 루트 앞에 추가/가 없기 때문에 이것은 문제없습니다. 배제합니다.
사실 이것은list의 부급 코스에component가 없고 componnet이 있으며 이 component에는 가 있어야 합니다. 수정:

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

Course.vue는 다음과 같습니다.

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

이렇게 하면 끼워넣기를 실현할 수 있다.생각해 보면 본 예에서 사실 앱 구성 요소도 이렇다. 그는 를 제공했지?
http://localhost:8080/#/course/list
http://localhost:8080/#/course/content
다 방문할 수 있어요.
보충 지식: Vue-router 하위 루트가 표시되지 않는 구덩이
이 문제에 부딪히는 것은 기본적으로 내가 직면한 상황과 같아야 하지만 이 문제는 매우 은밀하고 베테랑은 만나지 못하며 신인은 분명하게 말할 수 없기 때문에 구덩이를 기어오른 후에 제기해야 한다.
부자 라우팅은 중첩된 관계이므로 상위 어셈블리를 건너뛰고 직접 서브어셈블리를 표시할 수 없습니다.예를 들어 나는 다음과 같은 index가 있다.js:``

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

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

Vue.use(VueRouter)

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

어셈블리에서 XXX.vue에서 recomView와 recomEdit 두 구성 요소를 가져오고 싶습니다.

<template>
……
<router-view></router-view>
……
</template>

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

하지만 위의 index를 사용합니다.js, 도저히 도입할 수 없다는 것을 발견할 수 있습니다.도입할 때 등급을 뛰어넘었기 때문이다.고개를 돌려 위의 index를 보세요.js, 타당하지 않은 점이 많으니 천천히 분석해 보세요
부모 루트'/recom'에 대응하는 component가 없어서 XXX가 발생합니다.vue의router-view는 대응하는 구성 요소가 없기 때문에 이 페이지에서 RecomView나 RecomEdit를 표시하려는 곳은 공백입니다.
만약에 이 때에'/recom'에 component를 추가하면,component:recomView에 직접 편리하도록,recomView와 recomEdit를 가리키는 두 가지 루트가 모두 recomView를 표시합니다.
그러면 문제는 명백히 알 수 있다. 사실은 주어진 루트가 등급을 뛰어넘는 것이다. 부자 루트는 두 층의 끼워 넣는 관계이고 최상위 구성 요소 중의router-view는 이곳의 부급 루트, 즉'/recom'만 가리킨다. 하위 루트를 가리키려면 한 층을 더 끼워야 한다.
여기까지 와서 해결 방법은 비교적 쉽게 생각할 수 있다. 그것은 바로 구성 요소를 다시 만드는 것이다.vue는 부모 루트에 대응합니다.recom에 있습니다.vue에router-view를 한 번 더 도입하면 됩니다.

//recom.vue， '/recom' ， router-view 
<template>
 <router-view></router-view>
</template>

그것은 더 간단한 것이 있습니까? Recom을 만들 필요가 없습니다.vue 방법은요?있다.
인덱스에서js에서 constrecom = {template:''}를 직접 도입하면 됩니다.수정된 index.js는 다음과 같습니다.

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

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

Vue.use(VueRouter)

// recom ！
const recom = {
 template: `<router-view></router-view>`
}

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

그럼 다른 방법이 없을까요?있다.그것은 플러그인 루트를 사용하지 말고 하위 루트를 아버지 루트와 동급으로 올리면 된다는 것이다. 어쨌든 아버지 루트에 대응하는 구성 요소가 필요하지 않다. 그리고 아버지 루트에 당신이 기본적으로 표시하고 싶은 페이지를 가리키는redirect를 설정하면 이 믿음은 모두 쓰지 않을 것이다.이것도 내가 처음에 생각한 방법이지만, 위의 버그가 해결되지 않아서 마음이 불편해서 시간을 좀 지체했지만, 다행히 겨우 원인을 찾은 셈이다.
JS는 매우 유연한 언어인 것 같아요. 저처럼 도중에 출가하여 아무 책도 보지 않고 웹을 하기 시작했어요. 정말 시간을 내서 기초를 잘 보충해야 해요.
이상에서 vue-router 플러그인 루트의 반응이 없는 문제를 해결한 것은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.