router-link 与router-view的 slot

     

      在前面已经写了关于router 的好多文章，也写了router 的几个内置全局组件router-link 和router-view，其实这也主要是因为router 在内部做了好多事情，也就是之前创建一个router 对象，然后通过app.use(router) 进行了使用，而这样去使用的时候其实会执行 router.install 这个函数，这个函数会把app传过来，然后内部注册了router-link 和router-view这么一个全局组件

router 
apply.use(router)

router.install=function(app){
app.component("router-link",{})
app.component("router-view",{})
}

2.router-link v-slot 的使用

props:href 跳转的链接

 props:route对象

 props:navigate 导航的跳转

<div id="app">
<!--props:href 跳转的链接  -->
<!-- props:route对象 -->
<!-- props:navigate 导航的跳转 -->
  <router-link to="/headers" v-slot="props">
   <button>{{props.href}}</button>
   <button @click="props.navigate"></button>
   <span>{{props.route}}</span>
  </router-link>
  <router-link to="/mains">内容</router-link>
<router-view/>
</div>

路由动画动画形式的跳转

  <router-view v-slot="props">
   <transition name="jiang">
   <component :is="props.Componnet"></component>
  </transition>
  </router-view>