vue笔记（五）插槽. 路由

插槽

　　插槽的基本作用和props一样，都是组件间传递数据的。

       只是插槽更加灵活，props只能针对某些特定的数据类型传值。而插槽可以接受任何数据。具体内容由父组件决定。

  用法

      子组件用<slot>占位。父组件将具体内容写在引入的插槽组件中间，中间内容会自动添加到子组件中

　具名插槽

　　有名字的插槽；如果一个子插槽组件中有多个插槽，即有多个<slot>，父组件传值时，不能确定是传给子组件的哪个插槽的，所以用name属性加以区别。

　　子组件：用带name属性的<slot>标签来区分

        

　　父组件：template模板标签中v-slot:属性区分

       

 路由

　　路由包括三个重要的信息：

1. 根据页面不同的url地址，用js渲染出不同的组件；  ----------构造函数VueRouter的routes来确定
2. 将组件放到特定区域。---------- <RouterView>标签 位置，当Vue.use(VueRouter)后，该<RouterView>组件会自动注册到全局。
3. 并且变换地址过程中，不重新加载和渲染全部页面，而只是部分。

　安装

       包：vue-router

　　使用插件：

1. Vue.use(vue-router);
2. 创建路由对象 const router = new VueRouter(配置对象)
3. j将路由对象router作为vue配置对象的router属性，new Vue({router,  data，components,  ...})

        

       

 路由配置对象：

　　mode：

         hash；hash模式是默认的模式，兼容最好；

               hash本来就能无刷新的跳转。如：localhost/#/aaa到localhost/#/bbb；

　　　　用location.hash可以取值(获取的是#后面的)，也可以直接赋值；能满足 地址栏和 a标签 的双向绑定。

　　　　同时还能监听hash的跳转，就能那满足根据地址栏hash值的变化，改变渲染的组件了。

         

 　　history模式

      　　用户感觉最好，通过location.pathname获取值；跟hash没关系

             http://localhost:8080/as/cc#/about/asb             location.pathname:/as/cc

            如下图：后面即使由hash值，history模式下，依然能匹配出about组件，

             

　　　　history模式是vue封装

　　　　　在普通a标签和地址栏对应时，改变会刷新页面。

                   

　　　       h5的 History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录

从某种程度来说, 调用 pushState() 和 window.location = "#foo"基本上一样, 他们都会在当前的document中创建和激活一个新的历史记录。

 

刷新页面的不好出：

即全部重新请求html，css，js代码，执行js，创建vue实例，渲染全部组件树，挂载到指定的dom中。　这就一点也发挥不出vue的优势：比较新旧dom树，只重新挂载变化了的部分。

RouterLink标签：和router-view一样，都是Vue.use(Router)时注册的全局组件在template中的应用。

<RouterLink to='xxx'>相当于：<a href='xxx'> 

但对比a标签，使用router-link的好处是：它可以根据路由配置对象的mode属性，自动生成合适的路径；

router工作流程：

渲染到<router-view>区域时候，就要根据router的配置对象，查看当前路由模式，根据模式和当前路径（比如localhost：8080/），再根据路由配置对象的routes，来把对于的组件渲染到router-view占位区域。当点击router-link时，读取当前的路由模式和路径，根据路由配置规则，匹配对应组件，再次渲染到router-view区域。

激活状态：

　　vue会根据当前路径(地址栏的真实路径)和导航路径（router-link的to值）对比，出现两种匹配结果：

• router-link-active   真实路径以导航路径开头，如 导航路径‘/’, 真实路径‘/aaa’
• router-link-exact-active  二者完全相同

      然后将这结果作为类名，自动添加到router-link上；

　　更改这种默认的router激活状态：

　　在router-link上添加属性exact，则有原来的以导航路径开头就添加router-link-active，更改成必须精准匹配才添加router-link-active。router-link-exact-active不用了。

      如：router配置对象的routes：[{path：‘/’, component: Home}，{path：‘/blog’, component: blog}]; 

            <router-link to='/'>首页</router-link>  <router-link to='/blog'>blog</router-link> ;并且blog后会有blog/cat/xxx来表示blog分类的子路由

            要求点击菜单中的首页或blog，对应的背景色会变。

       如果按照默认的激活状态，将router-link-exact-active作为被选中的类名，则在blog子路由展示的时候，会出错；将router-link-active时候，点blog则首页也能匹配到。所以，可以改变路由规则， <router-link exact to='/'>表示只有精准匹配才可以出现router-link-active,由此可以将router-link-actie作为类名进行css设置背景。　　

　　改变默认的class属性：exact-active-class和active-class

　　默认class是router-link-active和router-link-exact-active，可以在router-link标签上用active-class和exact-active-class来指定，下图将exact-active-class设置为空