vue-router路由知识补充
2018-06-06 22:57
741 查看
1、render函数
我们新加了
官方文档说明1:
官方文档说明2:
render ,类型:Function
详细:字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。render 函数接收一个 createElement 方法作为第一个参数用来创建 VNode。(我是这么理解的,我们的路由跳转时,定位到了一个组件进行渲染,但是之前app这个容器里面是有其他组件的,我们不能直接添加进去,只能把app里面的模板文件替换掉,所以用这个字符串模板的代替方案render(不知道对不对,真心请大神指出,大家这里略过吧))
2、懒加载
懒加载的必要性:
(1)解决样式冲突问题
(2)解决页面资源加载问题
(3)路由被访问时才加载对应组件,提高应用加载效率
具体代码写法:关键我们要做的就是把之前普通import进来的组件定义成异步组件。
3、路由构造配置
mode :默认’hash’值,但是hash看起来就像无意义的字符排列,不太好看也不符合我们一般的网址浏览习惯。
当你使用 history 模式时,URL 就像正常的 url,没有 # 号了
base :默认值: “/”,应用的基路径,一般就是项目的根目录,webpack中有配置好。
linkActiveClass :默认值: “router-link-active”,就是当前组件被激活,相应路由会自动添加类”router-link-active”,这里是为了全局设置激活类名,如果不设置,直接用默认的也是可以的。
scrollBehavior :通过这个这个属性(是个函数),可以让应用像浏览器的原生表现那样,在按下 后退/前进 按钮时,简单地让页面滚动到顶部或原来的位置。
4、router-link的其他表现形式
有时候我们会这样去写,但是发现多了一个层级,而Vue提供了很好的方案。
5、当前路由添加激活状态
地址栏变化的同时,对应组件也要相应的切换状态,这是因为vue-router提供了这样的机制,即当前路由激活时,自动添加类名,默认
可以直接用默认类名,那接下来就是写CSS(less)样式了
不过这里会遇到一个问题,就是当出现嵌套路由时,会出现激活污染。 举个例子,如果当前的路径是 /a 开头的,那么
6、路由跳转时添加过渡动效
这个功能也是通过vue-router切换时,自动添加了类名实现的。路由之间的切换添加一点动效效果会很不错的。 这里我们在App组件的路由出口上添加动效就好了,因为所有的组件都渲染在这里,这样我们就可以给所有的路由切换添加动效。
过渡的css类名:
要想添加更多的动画效果,大家可以看文档和自由发挥了,也可以添加其他动画库。
7、命名路由
在路由实例创建的时候,我们会给每个路由地址添加一个name属性,这样在路由嵌套的时候,就不用写很长的路由地址,只需要写个name就好了。
8、通过注入路由器,我们可以在任何组件内通过
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(不知道对不对,真心请大神指出,大家这里略过吧))
2、懒加载
懒加载的必要性:
(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)
3、路由构造配置
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 :通过这个这个属性(是个函数),可以让应用像浏览器的原生表现那样,在按下 后退/前进 按钮时,简单地让页面滚动到顶部或原来的位置。
4、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>
5、当前路由添加激活状态
地址栏变化的同时,对应组件也要相应的切换状态,这是因为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>
6、路由跳转时添加过渡动效
这个功能也是通过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 完成之后移除。
要想添加更多的动画效果,大家可以看文档和自由发挥了,也可以添加其他动画库。
7、命名路由
在路由实例创建的时候,我们会给每个路由地址添加一个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>
8、通过注入路由器,我们可以在任何组件内通过
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('/') } } }
相关文章推荐
- vue-router2.0动态路由获取参数
- Vue-router路由基础总结(一)
- vue-router路由简单案例介绍
- vue-router学习二(动态路由)
- 深入Vue-Router源码分析路由实现原理
- vue2.0+基础知识连载(17)--- 路由
- vue-router同一路由地址同页面切换无效解决
- vue-router 配置路由
- vue-router 源码实现前端路由的两种方式
- 用vue-router和webpack搭建路由项目
- vue.js路由vue-router(二)——路由进阶
- vue router学习——动态路由和嵌套路由
- Vue-router的使用和出现空白页,路由对象属性详解
- Vue中的 this.$router.push() 参数获取 (通过路由传参)
- 浅谈vue-router2路由参数注意的问题
- 电商之梳理Router相关知识---路由
- vue2.0路由--vue-router
- windows下vue-cli及webpack 构建网站及 路由vue-router的使用
- vue-router 二级路由
- vue通过 vue.mixin(混合)实现 任意页面记录滚动条位置(路由router.query参数一致) 并跳转到上次的位置