vue路由高级语法糖
1.当 <router-link> 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active.
模板中可以用{{$route.params.xxx取到路由参数}}或者{{$route.query取到参数}}或者{{$route.hash取到hash}}
实例中(js)可用:this.$route.params.xxx/this.$route.query.xxx取到路由参数;
2.通过$router 访问路由实例;
.路由带参数:
const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
router.push({ path: 'register', query: { plan: 'private' }})
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
.路由历史记录:
window.history.go(n)
router.go(n)
History.back() //历史记录中的上一页
History.forward() //历史记录中的下一页
在window.history里新增一个历史记录点 存储当前历史记录点
//当前的url为:http://qianduanblog.com/index.html
var json={time:new Date().getTime()};
window.history.pushState()三个参数:
//1.状态对象:记录历史记录点的额外对象,可以为空
//2.页面标题:目前所有浏览器都不支持
//3.可选的url:浏览器不会检查url是否存在,只改变url,url必须同域,不能跨域
window.history.pushState(json,"","http://qianduanblog.com/post-1.html");
执行了pushState方法后,页面的url地址为http://qianduanblog.com/post-1.html。
替换当前历史记录点:window.history.replaceState()不会在window.history里新增历史记录点
其效果类似于window.location.replace(url),都是不会在历史记录点里新增一个记录点的;
监听历史记录点:直观的可认为是监听URL的变化,但会忽略URL的hash部分,监听URL的hash部分,HTML5有新的API为onhashchange事件
通过window.onpopstate来监听url的变化;并且可以获取存储在该历史记录点的状态对象;
//当前的url为:http://qianduanblog.com/post-1.html
window.onpopstate=function(){
// 获得存储在该历史记录点的json对象
var json=window.history.state;
//点击一次回退到:http://qianduanblog.com/index.html
//获得的json为null
//再点击一次前进到:http://qianduanblog.com/post-1.html
//获得json为{time:1369647895656}
}
注意:js脚本执行window.history.pushState和window.history.replaceState不会触发onpopstate事件。
5.路由重定向
{ path: '/a', redirect: { name: 'foo' }} //重定向的目标也可以是一个命名的路由
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载;
6.路由元信息:
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
meta: { requiresAuth: true }
}
]
}
]
})
对应:
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!auth.loggedIn()) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // 确保一定要调用 next()
}
})
7.滚动行为:当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置;
注意: 这个功能只在支持 history.pushState 的浏览器中可用;(也就是mode: 'history')
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
// return 期望滚动到哪个的位置
}
})
对于所有路由导航,简单地让页面滚动到顶部;
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
如果你要模拟『滚动到锚点』的行为:
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}
异步滚动:
scrollBehavior (to, from, savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ x: 0, y: 0 })
}, 500)
})
}
8.Router 构造配置:
mode:可选值: "hash(默认值浏览器环境)" | "history" | "abstract(默认值Node.js 环境)",
base:"/",(默认值)应用的基路径
linkActiveClass:"router-link-active"(默认值),
linkExactActiveClass(2.5.0+):"router-link-exact-active"(默认值),
scrollBehavior:滚动行为function;
parseQuery / stringifyQuery:提供自定义查询字符串的解析/反解析函数。覆盖默认行为function;
fallback(2.6.0+):当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。
类型: boolean,在 IE9 中,设置为 false 会使得每个 router-link 导航都触发整页刷新。它可用于工作在 IE9 下的服务端渲染应用,因为一个 hash 模式的 URL 并不支持服务端渲染。
9.路由信息对象
$route.path:字符串,对应当前路由的路径,
$route.params:一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象,
$route.query:一个 key/value 对象,表示 URL 查询参数,如果没有查询参数,则是个空对象。
$route.hash:当前路由的 hash 值 (带 #) ,如果没有 hash 值,则为空字符串。
$route.fullPath:string类型完成解析后的 URL,包含查询参数和 hash 的完整路径。
$route.matched:一个数组,包含当前路由的所有嵌套路径片段的路由记录。
$route.name:当前路由的名称,如果有的话。(查看命名路由)
$route.redirectedFrom:如果存在重定向,即为重定向来源的路由的名字。
在 HTML5 history 模式下,router-link 会守卫点击事件,让浏览器不再重新加载页面。
当你在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写(基路径)了。
10.导航守卫:
一、全局守卫
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => {
// ...
})
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
确保要调用 next 方法,否则钩子就不会被 resolved。
二、全局后置钩子
router.afterEach((to, from) => {
// ...
})
二、路由独享的守卫
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
三、组件内的守卫
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`,你可以通过传一个回调给 next来访问组件实例
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
11.路由懒加载
import page1 from './routes/page1.vue'
const page2 = r => require.ensure([], () => r(require('./routes/page2.vue')))
const routes = [
{ path: '/main', component: page1 },
{ path: '/other', component: page2 }
]
//这两条路由被打包在相同的块中,访问任一路由都会延迟加载该路由组件
//有时候我们想把某个路由下的所有组件都打包在同个异步 chunk 中。(借助WebPack的require.ensure())
语法:require.ensure(dependencies: String[], callback: function(require), chunkName: String)
const page1= r => require.ensure([], () => r(require('./routes/page1.vue')), 'big-pages')
const page2 = r => require.ensure([], () => r(require('./routes/page2.vue')), 'big-pages')
写法二:
export default new Router({
routes: [
{
path: '/',
component: resolve => require(['components/Hello.vue'], resolve)
},
{
path: '/about',
component: resolve => require(['components/About.vue'], resolve)
}
]
})
12.vue组件的按需加载(2种方式)
组件里面:
components: {
bview: resolve => {require(["./b.vue"], resolve);}
},
模板里面:
<component :is="current" :data="myData" ></component>
data() {
return {
current: "",
myData:"",
show:false
}
},
methods: {
changeComponents(view){
if(view=='aview'){
this.myData='a1000';
}
else{
this.myData='b1000';
}
this.current=view;
}
}
vue路由高级语法糖的更多相关文章
- 关于vue中的语法糖v-model
开发src-在线系统的过程中,封装了很多组件,如Dialog prompt等,在开源项目的组件中这些组件使用v-model来控制显示,我来总结一下关于自己学习到的v-model知识 1. 使用prop ...
- vue路由高级用法
五.路由设置高级用法alias 别名 {path:'/list',component:MyList,alias:'/lists'}redirect 重定向 {path:'/productList',r ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- [Vue]Vue语法糖v-bind、v-on
语法糖 :是指在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发,简化代码是书写. Vue.js的v-bind和v-on指令都提供了语法糖,也可以说是缩写. 1.v-bind可以省略, ...
- vue 中的.sync语法糖
提到父子组件相互通信,可能大家的第一反应是$emit,最近在学着封装组件,以前都是用的别人封装好的UI组件,对vue中的.sync这个修饰符有很大的忽略,后来发现这个修饰符很nice,官方对她的描述是 ...
- Vue.js---指令与事件、语法糖
指令与事件 指令(Directives)是Vue.js模板中最常用的一项功能,它带有前缀v-,指令的职责就是当其表达式的值改变时,相应地将某些行为应用到DOM上. v-if: 显示这段文本 当数据sh ...
- vue组件化之模板优化及注册组件语法糖
vue组件化之模板优化及注册组件语法糖 vue组件化 模板 优化 在 https://www.cnblogs.com/singledogpro/p/12054895.html 这里我们对vue.js ...
- 小白学习vue第五天-第二弹(全局局部、父子、注册语法糖,script/template抽离模板)
全局组件: 就是注册的位置在实例对象的外面 并且可以多个实例对象使用 而局部: 就是在实例对象的内部注册 父组件和子组件的关系 子组件就是在另一个组件里面注册的组件 组件注册语法糖: 就不用Vue.e ...
- 传说中 VUE 的“语法糖”到底是啥?
一.什么是语法糖? 语法糖也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语.指的是计算机语言中添加的一种语法,在不影响功能的情况下,添加某种简单的语 ...
随机推荐
- Nth prime & numbers of primes (模板)
都是取的模板,这几天做的素数题挺多的,所以整理了放在这里,感觉有一天回用到的! SPOJ:Nth Prime: 求第N个素数,N<1e9. #include<bits/stdc++ ...
- [Selenium] Android HTML5 中 Application Cache
HTML5 中引入了 Application Cache,这意味着 Web 应用程序可以被缓存到本地,且可在没有网络的情况下也能访问该 Web 应用程序 Application Cache 在以下3个 ...
- [Selenium] common functions comparison
1.Wait for element in default time or self defined time When the element need some time to be prese ...
- 理解iOS Event Handling
写在前面 最近的一个iOS App项目中遇到了这么问题:通过App访问服务器的大多数资源不需要登录,但是访问某些资源是需要用户提供验证的,一般来说,通常App的做法(譬如美团App)将这些资源放在“我 ...
- HNOI2017 day1 T2 影魔
题目大意: 影魔,奈文摩尔,据说有着一个诗人的灵魂.事实上,他吞噬的诗人灵魂早已成千上万.千百年来,他收集了各式各样的灵魂,包括诗人.牧师.帝王.乞丐.奴隶.罪人,当然,还有英雄. 每一个灵魂,都有着 ...
- bzoj 4260 REBXOR —— Trie树
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4260 用 Trie 树可以找出前缀异或的最大值和后缀异或的最大值,拼起来即可: 注意要先加入 ...
- 高效使用ppt素材
一.素材大致分为: 立体素材:以TG素材为代表的那种高光立体素材 平面素材:以咨询公司麦肯锡.罗兰贝格公司为代表的平面设计的素材 二.使用原则: 原则一:平面左边,立体右边 这个原则告诉你几件事: 如 ...
- HDU6050: Funny Function(推公式+矩阵快速幂)
传送门 题意 利用给出的式子求\(F_{m,1}\) 分析 直接推公式(都是找规律大佬) \(n为偶数,F_{m,1}=\frac{2(2^n-1)^{m-1}}3\) \(n为奇数,F_{m,1}= ...
- lightoj 1125【01背包变性】
题意: 从n个数里选出m个来,还要使得这m个数之和被d整除. 给一个n和q,再给n个数,再给q个询问,每个询问包含两个数,d,m; 对于每个case输出每个q个询问的可行的方案数. 思路: 每个数只能 ...
- c#删除指定文件夹中今天之前的文件
1.说明 使用Directory类对指定文件夹下的今天或者更早日期之前的文件进行删除.原文链接:http://www.cnblogs.com/lengzhan/p/6423943.html 2.代码 ...