一、文件结构

二、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之导航钩子和元数据及匹配的更多相关文章

  1. 【11】vue router 之导航钩子

    导航钩子 vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的.http://www.jiansh ...

  2. vue路由6：导航钩子

    <div id="app"> <div> <router-link to="/">首页</router-link> ...

  3. vue-router导航钩子

    Vue路由中的导航钩子,可以用来拦截导航,让它完成跳转. 全局导航钩子 当一个导航触发时,全局的 before 钩子按照创建顺序调用.钩子是异步解析执行,此时导航在所有钩子 resolve 完之前一直 ...

  4. day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等

      本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...

  5. vue路由-编程式导航

    除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location, onComp ...

  6. vue进阶：vue-router之导航守卫、路由元信息、路由懒加载

    1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...

  7. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  8. vue项目创建步骤 和 路由router知识点

    菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...

  9. vue 导航钩子

    导航钩子 (译者:『导航』表示路由正在发生改变.) 正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的 ...

随机推荐

  1. POJ3889Fractal Streets

    Fractal Streets Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 445   Accepted: 162 Des ...

  2. SQLServer —— 变量的使用

    一.局部变量的定义与赋值 定义语法: -- 声明一个局部变量 DECLARE @变量名 数据类型 -- 声明多个局部变量 DECLARE @变量名1 数据类型1, @变量名2 数据类型2 赋值语法: ...

  3. 【JZOJ4793】【GDOI2017模拟9.21】妮厨的愤怒

    题目描述 栋栋和标标都是厨力++的妮厨.俗话说"一机房不容二厨",他们两个都加入了某OI( )交流♂( )群,在钦定老婆的时候出现了偏差,于是闹得不可开交.可是栋栋是群内的长者,斗 ...

  4. day39-Spring 02-AOP的概述

     横向抽取的机制其实就是代理机制.对UserDao生成一个代理类:UserDaoProxy.被代理对象和代理对象它俩实现相同的接口它俩肯定是平级的,这就是横向抽取的机制.如果这时候调用UserDao的 ...

  5. 杨柳目-杨柳科-Info-新闻：注意了！杨絮解决有办法了

    ylbtech-杨柳目-杨柳科-Info-新闻:注意了!杨絮解决有办法了  1.返回顶部 1. 注意了!杨絮解决有办法了 2018-05-03 14:18 昨天中午经过一个理发店,门口蹲了个染黄发.系 ...

  6. time 与 data time

    >>> import datetime>>> datetime.datetime.now()datetime.datetime(2018, 5, 30, 15, 3 ...

  7. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十四章：曲面细分阶段

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十四章:曲面细分阶段 代码工程地址: https://github. ...

  8. install jqdatasdk

    install jqdatasdk pip3 install jqdatasdk ... 54% |█████████████████ | 3.2MB 84kB/s eta 0:0 54% |████ ...

  9. 原生js实现复制文本到粘贴板

    项目中经常会遇到点击按钮复制订单号.订单id等内容到粘贴板中的需求.可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('co ...

  10. hdu 1561【树形dp+01背包】

    http://acm.hdu.edu.cn/showproblem.php?pid=1561 很容易想到如果是要攻克v城需要先攻克u城的话,可以建u到v的边.但是如果能够直接攻克u城呢?无边可建,这样 ...