Vue exact router view

Vue component plugin which only render when router exactly matched.

Version: 1.2.0 Updated: 09/06/2019

By: Kagashino License: MIT

Downloads Last 30 Days: 76

Vue component plugin which can render when router exactly matched.


import ExactRouterView from 'vue-exact-router-view'


Define vue-router option as usual

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

define router component

  <div>This belong to detail</div>

pass nested routerdetail as name prop to component

  <exact-router-view name="detail">
    <div>This is Homepage</div>


when router path was /, it should render component default slots:

This is Homepage

when router path was /detail, the homepage was not rendered but the only exactly router-view:

This belong to detail

Categories: Vue js