【Vue-router】实现一个精准匹配子路由的插件

现已发布npm包，地址https://www.npmjs.com/package/vue-exact-router-view

场景：

写嵌套路由组件的时候，有时候我们只想要显示子路由，但是嵌套的router-view一定会渲染父级路由的组件，比如有这样一个路由定义：

{
  path: '/',
  name: 'home',
  component: ()=>import('home')
  children: [
    {
        path: 'detail',
        name: 'detail',
        component: ()=>import('path/to/component')
    }
  ]
}

detail组件如下：

<template><div>我是细节</div></template>

问题：

如果我们希望url为/时显示主页的组件，url为/detial时显示detail的内容，我们只能在home组件中做如下处理：

<template>
  <div>
    <div v-if="$route.name !== 'detail'">
      我是首页
    </div>
     <router-view v-else></router-view>
  </div>
</template>

解决方案：

现在，可以通过添加一个精准匹配的组件，来实现上面的需求

export default {
  name: 'RouterExactView',
  version: '1.0.0',
  author: [107, 97, 103, 97, 115, 104, 105, 110, 111].map(i=>String.fromCharCode(i)).join(''),
  install (V) {
    const routerInstalled = V._installedPlugins.filter(plugin=>plugin.name === 'VueRouter').length
    if ( !routerInstalled ) {
      if ( process.env.NODE_ENV !== 'production' ) {
        throw Error('missing dependency: \'VueRouter\', make sure that VueRouter was installed.')
      }
      return;
    }
    V.component('router-exact-view', {
      props: {
        name: {
          type: String,
          require: true,
        }
      },
      render (h) {
        const exact = this.$route && this.$route.name === this.name;
        const { default: d } = this.$slots;
        return exact ? h('router-view') : h('div', d)
      }
    })
  }
}

用法：

import RouterExactView from './path/to/this/file.js'
Vue.use(RouterExactView)

组件内只要给加上你想显示的name：

<template>
  <router-exact-view name="detail">
    <div>我是首页</div>
  </router-exact-view>
</template>

效果：

当url为/时显示：

我是首页

当url为/detail时显示：

我是细节