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.

Installation

import ExactRouterView from 'vue-exact-router-view'
Vue.use(ExactRouterView)

Usage

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

<template>
  <div>This belong to detail</div>
</template>

pass nested routerdetail as name prop to component

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

Result

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