1回答

Sam

2019-12-17

你好，下面详细介绍一下 router-view 的实现原理哈。假设我们访问的路由是 /book/list，那么实现处理过程如下：

1、首先浏览器会执行 main.js，main.js 中会实例化 Vue，并挂载 App.vue 组件，源码如下：

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

2、App.vue 的源码如下：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

这里的 router-view 是一个动态组件，它会根据 router/index.js 的路由表来匹配对应的组件，比如这里的 /book/list 会匹配到如下路由：

{
  path: '/book',
  name: 'book',
  component: Layout,
  redirect: '/book/create',
  meta: { title: '图书管理', icon: 'documentation', roles: ['admin', 'editor'] },
  children: [
    {
      name: 'bookList',
      path: '/book/list',
      component: () => import('@/views/book/list'),
      meta: { title: '图书列表', icon: 'list', roles: ['editor'] }
    }
  ]
}

/book/list 匹配的路由是 /views/book/list.vue，所以 router-view 会直接替换成 /views/book/list.vue 吗？答案是否定的！因为 /book/list 是一个嵌套路由，所以 Vue 会优先将 router-view 替换成 /book/list 的父路由 /book 对应的 component，即 Layout，这里的 Layout 对应 /layout/index.vue，所以 App.vue 中的 router-view 被替换为 Layout

3、Layout.vue 的源码片段如下：

<template>
  <div :class="classObj" class="app-wrapper">
    <app-main />
  </div>
</template>

AppMain 组件源码如下：

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
</template>

可以看到 AppMain 组件中也包含了一个 router-view，这里的 router-view 会被替换为 /views/book/list.vue，如果你去掉这里的 router-view，那么界面上将只能展示出 Layout，而无法展示出我们自己编写的组件了

以上就是 router-view 的完整原理，希望能帮到你

6

1

封砺

解释的很详细了

2020-09-24

共1条回复