vue-router路由知识补充

一、render函数

var app = new Vue({ el: '#app', router, render: h => h(App) //新添加的函数操做 })

　　咱们新加了render: h => h(App) 一开始我没看懂，直接注释运行看下，结果<div id="app"></div> 这个容器里面就啥也没有渲染出来。我也不怎么理解，若是有大牛清楚的恳请留言指导一下啊。可是我仍是查了一下资料

　　官方文档说明1：

render: function (createElement) { return createElement( 'h' + this.level, // tag name 标签名称 this.$slots.default // 子组件中的阵列  ) }

　　官方文档说明2：

　　render ，类型：Function

　　详细：字符串模板的代替方案，容许你发挥 JavaScript 最大的编程能力。render 函数接收一个 createElement 方法做为第一个参数用来建立 VNode。（我是这么理解的，咱们的路由跳转时，定位到了一个组件进行渲染，可是以前app这个容器里面是有其余组件的，咱们不能直接添加进去，只能把app里面的模板文件替换掉，因此用这个字符串模板的代替方案render（不知道对不对，真心请大神指出，你们这里略过吧））

二、懒加载

　　懒加载的必要性：

　　（1）解决样式冲突问题

　　（2）解决页面资源加载问题

　　（3）路由被访问时才加载对应组件，提升应用加载效率

　　具体代码写法：关键咱们要作的就是把以前普通import进来的组件定义成异步组件。

//前 import home form "./components/home" import login form "./components/login" //后 const home = resolve => require(['./home.vue'], resolve) const login = resolve => require(['./login.vue'], resolve)

三、路由构造配置

const router = new VueRouter({ mode: 'history',//history: 依赖 HTML5 History API 和服务器配置。 base: __dirname, linkActiveClass:'link-active', scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } routes }) 

　　mode ：默认’hash’值，可是hash看起来就像无心义的字符排列，不太好看也不符合咱们通常的网址浏览习惯。

　　当你使用 history 模式时，URL 就像正常的 url，没有 # 号了

　　base ：默认值: “/”，应用的基路径，通常就是项目的根目录，webpack中有配置好。

var projectRoot = path.resolve(__dirname, '../')

　　linkActiveClass ：默认值: “router-link-active”，就是当前组件被激活，相应路由会自动添加类”router-link-active”，这里是为了全局设置激活类名，若是不设置，直接用默认的也是能够的。

　　scrollBehavior ：经过这个这个属性（是个函数），可让应用像浏览器的原生表现那样，在按下 后退/前进 按钮时，简单地让页面滚动到顶部或原来的位置。

四、router-link的其余表现形式

　　有时候咱们会这样去写，可是发现多了一个层级，而Vue提供了很好的方案。

<li> <router-link to="/mine"> <i class="icon-nav icon-nav5"></i><span>个人</span> </router-link> </li> <router-link to="/mine" tag="li"> //tag指定标签名 <i class="icon-nav icon-nav5"></i><span>个人</span> </router-link> //渲染结果 <li> <i class="icon-nav icon-nav5"></i> <span>个人</span> </li>

五、当前路由添加激活状态

　　地址栏变化的同时，对应组件也要相应的切换状态，这是由于vue-router提供了这样的机制，即当前路由激活时，自动添加类名，默认router-link-active ，在建立vue-router实例的时候给他设置全局配置，修改默认添加类名。

　　能够直接用默认类名，那接下来就是写CSS（less）样式了

linkActiveClass:'link-active'

.router-link-active{ .icon-nav5 { background-image: url('../assets/img/icon-nav5a@3x.png'); } color: #e5321e; }

　　不过这里会遇到一个问题，就是当出现嵌套路由时，会出现激活污染。 举个例子，若是当前的路径是 /a 开头的，那么 <router-link to="/a"> 也会被设置 CSS 类名。 一样的，按照这个规则，<router-link to="/"> 将会被各个路由激活！这时咱们须要使用 exact 属性来解决这种状况。

 <!-- 这个连接只会在地址为 / 的时候被激活 --> <router-link to="/" exact>

六、路由跳转时添加过渡动效

　　这个功能也是经过vue-router切换时，自动添加了类名实现的。路由之间的切换添加一点动效效果会很不错的。 这里咱们在App组件的路由出口上添加动效就行了，由于全部的组件都渲染在这里，这样咱们就能够给全部的路由切换添加动效。

<template> <div id="app"> <transition name="fade"> <router-view></router-view> </transition> </div> </template>

.fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-active { opacity: 0 }

　　过渡的css类名：

　　v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

　　v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成以后移除。

　　v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

　　v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成以后移除。

　　要想添加更多的动画效果，你们能够看文档和自由发挥了，也能够添加其余动画库。

七、命名路由

　　在路由实例建立的时候，咱们会给每一个路由地址添加一个name属性，这样在路由嵌套的时候，就不用写很长的路由地址，只须要写个name就好了。

routes: [ { path: '/login/loginWx', name: 'loginWx', component: function(reslove){ return require(['./components/login/loginWx'],reslove) } } ] //命名的路由 <router-link :to="{ name: 'loginWx', params: { userId: 123 }}">User</router-link>

八、经过注入路由器，咱们能够在任何组件内经过 this.$router 访问路由器，也能够经过 this.$route 访问当前路由：注意差异

export default { computed: { username () { return this.$route.params.username } }, methods: { goBack () { window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/') } } }