对于<router-view></router-view>的用法

Question

在APP.vue主组件中，内容上就只有<router-view></router-view>，然后在其他页面也有<router-view></router-view>，它是怎么传递的。原理是什么

Answer 1

可以这样理解，正常写法中，一层路径(/xxx)对应一个router-view。

比如url: /a/b/c (假设a、b、c都为正常路径，不会作为参数)

• 那/a对应的就是App.vue中的router-view，/a进入a.vue中
• 那/a/b对应的就是a.vue中的router-view， /a/b进入b.vue中

以此类推。

Answer 2

vue中嵌套路由和嵌套组件之间的匹配是个很常见的需求，使用 vue-router 可以很简单的完成这点。
您可以看下官方文档以及源码
https://github.com/vuejs/vue-...

大概是动态渲染一个页面级的组件。

https://cn.vuejs.org/v2/guide...定义

Answer 3

你好，在router-view的嵌套外层使用keep-alive，是否需要在keep-alive同级再还用router-view

<template>
            <div class="main-content">
              <keep-alive>
                <router-view v-if="$route.meta.keepAlive"></router-view>
              </keep-alive>
              <router-view v-if="!$route.meta.keepAlive"></router-view>
            </div>
          </template>

Answer 4

遇到一个多页面router-view不显示的问题，发现第二个单页面的路由path根目录需指定为/，而非/book.即：
正确方式：

export default new Router({
  routes: [
    {
        path: '/',
        name: 'book',
        component: book
    }
  ]
})

错误方式：

export default new Router({
  routes: [
    {
        path: '/book',
        name: 'book',
        component: book
    }
  ]
})