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 提供的导航钩子主要用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的 ...
随机推荐
- CSS基础教程:群组化选择器
常常我们的CSS 样式中会有好几个地方需要使用到相同的设定时,一个一个分开写会是一件满累人的工作,重覆性太高且显得冗长,更不好管理....在CSS 语法的基本设定中,就可以把这几个相同设定的选择器合并 ...
- day38 13-Spring的Bean的属性的注入：SpEL注入
Spring2.5提供了名称空间p注入属性的方式,Spring3.几提供了SpEL属性注入的方式. <?xml version="1.0" encoding="UT ...
- Spring4.x 基础知识点
# Spring4.x 基础知识点## 第二章 快速入门- 一般情况下,需要在业务模块包下进一步按分层模块划分子包,如user\dao.user\service.viewspace\dao.views ...
- StatusBar用法
一.StatusBar组件介绍 StatusBar 是 React Native 0.20 起新增的跨平台组件,它可以用来设置并动态改变设备的状态栏显示特性. StatusBar 组件可以同时加载多个 ...
- LintCode_68 二叉树后序遍历
题目 给出一棵二叉树,返回其节点值的后序遍历. 思路 后序比较麻烦 需要另外一个变量来记录当前节点入栈的次数 设计pair<TreeNode*, int> p; p.first 为二叉树节 ...
- JAVA-WEB-错误之-'OPTION SQL_SELECT_LIMIT=DEFAULT'
You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version ...
- QT 引用之前项目模板导致计算速度严重下降
最近做RRT规划算法,在新建工程中测试时,每一个周期大概花费20MS,但是当我把算法移植到之前写的工程模板中时,计算效率相当低,变为500毫秒.期初是以为代码有问题,然后就逐句查找,发现代码并没有问题 ...
- shell学习（23）- diff和patch
diff命令可以生成两个文件之间的差异对比. (1) 先创建下列用于演示的文件.文件 1:version1.txt this is the original text line2 line3 line ...
- Android Binder简介
Android使用Linux的进程管理机制,以进程为单位分配虚拟地址空间.为了安全考虑,Android的不同进程之间是相互隔离的(进程之间被禁止直接交互).如果进程间需要通信,必须通过Android的 ...
- 《mysql必知必会》笔记1（检索、排序、过滤、计算、汇聚、分组）
一:了解SQL 1:列是表中的字段,所有表都由一个或多个列组成的.行是表中的记录,表中的数据都按行存储. 2:表中每一行都应该有可以唯一标识自己的一列或一组列.主键(一列或一组列),其值能够唯一区分每 ...