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

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

回答:

可以这样理解,正常写法中,一层路径(/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

以此类推。

回答:

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

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

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

回答:

你好,在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>

回答:

遇到一个多页面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
    }
  ]
})

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注