Skip to content

Vue component plugin which only render when router exactly matched.

License

Notifications You must be signed in to change notification settings

Kagashino/vue-exact-router-view

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Vue component plugin which only render when router exactly matched.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published