Vue的路由Router之导航钩子和元数据及匹配
一、文件结构
二、vue.js
打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js
复制粘贴页面的所有内容
三、vue-router.js
打开此链接 https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js
复制粘贴页面的所有内容
四、index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
</head>
<body>
<div id="app">
<h1>元数据及路由匹配</h1> <router-link to="/">首页</router-link>
<router-link to="/login">登录</router-link>
<router-link to="/post">帖子管理</router-link>
<router-link to="/a">A</router-link> <router-view></router-view>
</div> <script src="../lib/vue.js"></script>
<script src="../lib/vue-router.js"></script>
<script src="js/app.js"></script>
</body>
</html>
五、app.js
var routes = [
{
path:"/",
component:{
template:`
<h1>首页</h1>
`
}
},
{
path:"/a",
// 设置元数据属性,下面表示需要登录后才可以路由到/post
meta:{
login_required:true
},
component:{
template:`
<h1>A</h1>
`
}
},
{
path:"/login",
component:{
template:`
<h1>登录</h1>
`
}
},
{
path:"/post",
// 设置元数据属性,下面表示需要登录后才可以路由到/post
meta:{
login_required:true
},
component:{
template:`
<div>
<h1>帖子管理</h1> <router-link to="look" append>查看帖子</router-link>
<router-view></router-view>
</div>
`
},
children:[
{
path:"look",
component:{
template:`
<h2>这是今天写的一个帖子</h2>
`
}
}
]
},
]; var router = new VueRouter({
routes
}); router.beforeEach(function(to,from,next){ // VueRouter对象的beforeEach(function(to，from,next){})方法和afterEach(function(to，from){}),
// 称为导航钩子，可以控制访问权限和验证
// 里面的回调函数可以在路由前和路由后进行操作处理 logged_in = false;
// 方法一：导航钩子，来进行路由前的验证
// if(!logged_in && to.path == "/post"){
// next("/login");
// }else{
// next();
// } // vue提供了一个matched属性，得到的是一个数组，比如子路由/post/look，就匹配/post/look和/post
// console.log("to.matched：",to.matched); // js数组有一个some方法，方法里可以用回调函数，来遍历处理数组的每项
// to.matched.some(function(item){ // }) // 方法一验证了/post,如果含有子路由，比如/post/look,则没法验证，所以必须保证父路由及其后面所有的子路由
// 都能接受验证
// 解决方法：迭代数组里的每一项，只要有一项的path是/post,就跳向登录界面
// 方法二
// if(!logged_in && to.matched.some(function(item){
// return item.path == "/post"
// })){
// next('/login');
// }else{
// next()
// } // 第二种方法：写死了，对于一个页面(比如/post及其子路由)的验证是可以的，
// 但如果有多个路由（比如还有/a），就又得再写验证 // 方法三：在组件内设置元数据，更灵活
if(!logged_in && to.matched.some(function(item){
return item.meta.login_required
})){
next("/login");
}else{
next();
}
}); new Vue({
el:"#app",
router
})
六、浏览器效果
七、谢谢观看，如有问题，随时交流哦
Vue的路由Router之导航钩子和元数据及匹配的更多相关文章
- 【11】vue router 之导航钩子
导航钩子 vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的.http://www.jiansh ...
- vue路由6：导航钩子
<div id="app"> <div> <router-link to="/">首页</router-link> ...
- vue-router导航钩子
Vue路由中的导航钩子,可以用来拦截导航,让它完成跳转. 全局导航钩子 当一个导航触发时,全局的 before 钩子按照创建顺序调用.钩子是异步解析执行,此时导航在所有钩子 resolve 完之前一直 ...
- day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等
本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...
- vue路由-编程式导航
除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location, onComp ...
- vue进阶：vue-router之导航守卫、路由元信息、路由懒加载
1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...
- day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等
Vue学习四之过滤器.钩子函数.路由.全家桶等 本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...
- vue项目创建步骤 和 路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...
- vue 导航钩子
导航钩子 (译者:『导航』表示路由正在发生改变.) 正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的 ...
随机推荐
- HTML 实体字符
有些字符,像(<)这类的,对HTML来说是有特殊意义的,所以这些字符是不允许在文本中使用的.要在HTML中显示(<)这个字符,我们就必须使用实体字符. 实体字符 有一些字符对HTML来讲是 ...
- CMake学习笔记六-引用cmake文件
include(${CMAKE_CURRENT_SOURCE_DIR}/../Share/share.cmake)
- 【python练手】获取城市天气质量
#!/usr/bin/python # -*- coding: utf-8 -*- # get city pm2.5 and ranking # python2.7 import sys import ...
- 【转】MySQL的btree索引和hash索引的区别
Hash 索引结构的特殊性,其检索效率非常高,索引的检索可以一次定位,不像B-Tree 索引需要从根节点到枝节点,最后才能访问到页节点这样多次的IO访问,所以 Hash 索引的查询效率要远高于 B-T ...
- bzoj1191 超级英雄
Description 现在电视台有一种节目叫做超级英雄,大概的流程就是每位选手到台上回答主持人的几个问题,然后根据回答问题的多少获得不同数目的奖品或奖金.主持人问题准备了若干道题目,只有当选手正确回 ...
- oracle表复杂查询--多表查询
多表查询是指基于两个和两个以上的表或是视图的查询,在实际应用中,查询单个表可能不能满足你的要求,如显示sales部门位置和其员工的姓名,这种情况下需要使用到dept表和emp表. select ...
- 阿里云OSS同城冗余存储正式商业化，提供云上同城容灾能力
近日,阿里云正式发布OSS同城冗余存储产品.这是国内目前提供同城多AZ冗余部署能力覆盖最广的云上对象存储产品,可以实现云存储的同城双活,满足企业级客户对于“发生机房级灾难事件时数据不丢失,业务不中断” ...
- Java面向对象----方法重载
方法重载(over load):方法名相同,参数列表不同,返回类型无关 package com.tanlei.newer; public class OverLoadDemo { public sta ...
- ELK之开心小爬爬
1.开心小爬爬 在爬取之前需要先安装requests模块和BeautifulSoup这两个模块 ''' https://www.autohome.com.cn/all/ 爬取图片和链接 写入数据库里边 ...
- Inventor安装失败怎样卸载重新安装Inventor，解决Inventor安装失败的方法总结
技术帖:Inventor没有按照正确方式卸载,导致Inventor安装失败.楼主也查过网上关于如何解决Inventor安装失败的一些文章,是说删除几个Inventor文件和Inventor软件注册表就 ...