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 提供的导航钩子主要用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的 ...
随机推荐
- mac pro 1.5T内存是如何实现的
苹果发布全新Mac Pro:28核1.5T内存 预计售价10万+ 看到这样的新闻标题是不是很震撼,甚至怀疑人生,64位机怎么就可以1.5T内存了,自己的系统盘都没那么大 而且我们知道windows下的 ...
- 2019-2-16-WPF-封装-dotnet-remoting-调用其他进程
title author date CreateTime categories WPF 封装 dotnet remoting 调用其他进程 lindexi 2019-02-16 09:40:26 +0 ...
- 【SPOJ 220】 PHRASES - Relevant Phrases of Annihilation
[链接]h在这里写链接 [题意] 给你n(n<=10)个字符串. 每个字符串长度最大为1e4; 问你能不能找到一个子串. 使得这个子串,在每个字符串里面都不想交出 ...
- Hashkell 第一篇
心情极差.................. 无事可做,其实是没心情去做事情,只好又翻起了haskell入门 记下几点,以备查询: 1. 函数名首字符是不可以大写的, 而且名称中可以有单引号,这也是合 ...
- kibana一直弹出来报错?
1,这个我们需要授权 2.授予安全
- Java版阿里云通信短信发送API接口实例（新）
阿里云通信(原名阿里大于)的短信服务(Short Message Service)是阿里云为用户提供的一种通信服务的能力,支持快速发送短信验证码.短信通知等. 完美支撑双11期间2亿用户,发送6亿短信 ...
- Facebook POP动效库使用教程
编者注:用Origami作iOS动效的同学如果愁怎么实现,可以把这个给开发看看作为参考哦 如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地 ...
- PHPCMS快速建站系列之常用标签
<span class="Nmore"><a href="/index.php?m=content&c=index&a=lists&am ...
- 【JZOJ4359】【GDKOI2016】魔卡少女
题目描述 君君是中山大学的四年级学生.有一天在家不小心开启了放置在爸爸书房中的一本古书.于是,君君把放在书中最上面的一张牌拿出来观摩了一下,突然掀起一阵大风把书中的其她所有牌吹散到各地.这时一只看上去 ...
- 易位构词EOJ3451【字符串】【思维题】【模拟】
http://acm.ecnu.edu.cn/problem/3451/ 官方题解: 我们可以先考虑字符串有序的情况,比如是 aaabcc,我们只要将字符串右移 3 位,变成 bccaaa,就做完了. ...