vue-router路由知识补充
1、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(不知道对不对,真心请大神指出,大家这里略过吧))
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: , y: }
}
}
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:
}
过渡的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 >
? this.$router.go(-)
: this.$router.push('/')
}
}
}
vue-router路由知识补充的更多相关文章
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue系列:Vue Router 路由梳理
Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...
- 04 Vue Router路由管理器
路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...
- Vue Router路由管理器介绍
参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...
- Vue Router 路由守卫:完整的导航解析流程
完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...
- Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转
问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...
- Vue Router 路由实现原理
一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash ...
- Vue - Router 路由
路由的注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue router路由(三)
当环境搭建及Vue语法与指令都有所了解,该说下router. build目录是打包配置文件 (不建议动) config是vue项目基本配置文件 dist是构建后文件 js 手动创建 (根据需要) no ...
随机推荐
- leetcode 无重复字符的最长子串 python实现
这道题需要借助哈希查找key的O(n) 时间复杂度, 否则就会超时 初始化一个 哈希表\字典 dic 头指针start 初始为0 当前指针 cur 初始为0 最大长度变量 l 初始为0 用cur变量 ...
- HDU 5682 zxa and leaf 二分 树形dp
zxa and leaf 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5682 Description zxa have an unrooted t ...
- git命令行使用帮助
克隆代码库 git clone git_project_url 提交代码 git commit -m 'commit messge'
- wamp经典安装
1,根据综述 本机 注意,现在apache2.2不能和5.5php, 2.4apache和5.5php就可以 window10 64位 vc14 apache 2.4.23 注意,虚拟 ...
- 通过Roslyn构建自己的C#脚本(更新版)
之前写过文章介绍过如何通过Roslyn构建自己的C#脚本,但那篇文章是参考自Roslyn CTP版的,记得本来想等到Roslyn正式版出来重新更新一下文档的,不过记得后来Roslyn是跳票了的,Scr ...
- SyncThingWin -- Run syncthing as a windows service
SyncThingWin Auto restart and minor bug fixes bloones released this on 23 Dec 2014 There is now an a ...
- Turtelizer 2 provide JTAG Flash programming and debugging of ARM based boards via USB
http://www.ethernut.de/en/hardware/turtelizer/ Introducing Turtelizer 2 Overview Turtelizer 2 had be ...
- 腾讯旗下网站的很多URL都包含“cgi-bin”,是什么意思?他们后台用什么语言?
cgi-bin 这很有可能说明后台是C/C++写的. 动态Web技术刚出来的时候, 服务器调用本地应用程序处理http请求的技术. 通常是C/C++程序. 后来有了新的web开发技术后这类用的就比较少 ...
- 不用软件快速拥有几百个QQ群并都是管理员
不用软件快速拥有几百个QQ群并都是管理员!快速拥有有几十万精准数据库的方法 !和快速收集上亿邮箱的思维方法(附上5种赚钱方法).pdf_免费高速下载|百度云 网盘-分享无限制 http://pan.b ...
- .NET的堆和栈03,引用类型对象拷贝以及内存分配
在" .NET的堆和栈01,基本概念.值类型内存分配"中,了解了"堆"和"栈"的基本概念,以及值类型的内存分配.我们知道:当执行一个方法的时 ...