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 提供的导航钩子主要用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的 ...
随机推荐
- Web渗透三字经
网络上曾流传一段Web渗透三字经,如下: 用搜索 找注入 没注入 就旁注 没旁注 用0day 没0day 扫目录 找后台 爆账户 传小马 放大马 拿权限 挂页面 放暗链 清数据 清日志 留后门 然后我 ...
- JDK8 Stream 数据流效率分析
JDK8 Stream 数据流效率分析 Stream 是Java SE 8类库中新增的关键抽象,它被定义于 java.util.stream (这个包里有若干流类型: Stream<T> ...
- 洛谷 P1858 多人背包 DP
目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例 输出样例 说明 思路 AC代码 题面 题目链接 洛谷 P1858 多人背包 题目描述 求01背包前k优解的价值 ...
- WPF/Silverlight深度解决方案：(六)HLSL自定义渲染特效之完美攻略(上)
原文:WPF/Silverlight深度解决方案:(六)HLSL自定义渲染特效之完美攻略(上) Shader Effect种位图特效及2种渲染特效,而Silverlight中仅有这2种渲染特效: Bl ...
- Leetcode788.Rotated Digits旋转数字
我们称一个数 X 为好数, 如果它的每位数字逐个地被旋转 180 度后,我们仍可以得到一个有效的,且和 X 不同的数.要求每位数字都要被旋转. 如果一个数的每位数字被旋转以后仍然还是一个数字, 则这个 ...
- PLAY2.6-SCALA(四) 请求体解析器
一个http请求是一个请求头后面跟着一个请求体,头部信息比较短,可以安全的缓存在内存中,在Play中头部信息使用RequestHeader类进行建模.请求体的内容可能较大,使用流stream的形式进行 ...
- Windows中查看PowerShell版本和virbox版本，vagrant 版本
我并不是很熟悉什么是PowerShell,但是有种直觉是:如果想在Windows中使用系统自带的功能取代bash shell,PowerShell或许是比DOS批处理更好的选择.不过,从头开始再来一门 ...
- 集合--List&&ArrayList-LinkedList
1.8新特性 List接口中的replaceAll()方法,替换指定的元素,函数式接口编程 List 元素是有序的并且可以重复 四种add();方法 ArrayList(用于查询操作),底层是数组 ...
- laravel 参数设置
路由命名 Route::get('user/{id?}', function ($id = 1) { return "用户ID: " . $id; })->name('use ...
- C++中的union
1:,像任何类一样,union可以指定保护标记使成员成为公用的.私有的或受保护的.默认情况下,union 表现得像 struct:除非另外指定,否则 union 的成员都为 public 成员. 2: ...