一、文件结构

二、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. 洛谷 P3950 部落冲突 树链剖分

    目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例1 输出样例1 输入样例2 输出样例2 输入样例3 输出样例3 说明 思路 AC代码 总结 题面 题目链接 P3 ...

  2. 用JS实线放大镜的效果

    今天花了点时间,复习了下使用原生JS实线放大镜的效果.在制作过程中,也是很到了一些问题,在这里总结下. HTML代码如下: <div id="preview"> < ...

  3. xcode自动完成代码 Code Snippet Library

    今天发现Xcode里一个好东西:代码片段库 你可以将自己常用的代码放到里面,给它命名,设置快捷键,以后想用这段代码的时候只要按快捷键,就会出现提示,直接将这段代码显示出来,十分高效. 比如我经常会用到 ...

  4. hdu 3536【并查集】

    hdu 3536 题意: 有N个珠子,第i个珠子初始放在第i个城市.有两种操作: T A B:把A珠子所在城市的所有珠子放到B城市.  Q A:输出A珠子所在城市编号,该城市有多少个珠子,该珠子转移了 ...

  5. 在哈尔滨的寒风中EOJ 3461【组合数学】

    http://acm.ecnu.edu.cn/problem/3461/ 还是能力不够,不能看出来棋盘足够大时,马是可以到达任何位置的.还是直接看题解怎么说的吧:(http://acm.ecnu.ed ...

  6. 云上的Growth hacking之路，打造产品的增长引擎

    增长关乎产品的存亡 增长!增长!增长!业务增长是每一个创业者每天面临的最大问题.无论你的产品是APP,还是web,或者是小程序,只能不断的维持用户的增长,才能向资本市场讲出一个好故事,融资活下去.活到 ...

  7. *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '[<_UIFeedbackParameters 0x1d4442e50> setNilValueForKey]: could not set nil as the value for the key rate.'

    *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '[<_UIFeedbac ...

  8. 2019-11-20-dotnet-Blazor-用-C#-控制界面行为

    title author date CreateTime categories dotnet Blazor 用 C# 控制界面行为 lindexi 2019-11-20 18:26:25 +0800 ...

  9. Linux 网络原理及基础设置

    临时配置网络(ip,网关,dns)+永久配置 设置IP和掩码 ifconfig eth0 192.168.2.2 netmask 255.255.255.0 设置网关route add default ...

  10. re模块下的常用方法

    一  :  re模块的查找 findall  优先级查找  返回列表 找所有的匹配项(从大段的内容中找匹配到的项目) import re str = "qwer asdf zxcv qwer ...