Vue的路由Router之导航钩子和元数据及匹配

时间：2022-05-13 10:45:29

一、文件结构

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之导航钩子和元数据及匹配

七、谢谢观看，如有问题，随时交流哦

Vue的路由Router之导航钩子和元数据及匹配的更多相关文章

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

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

  2. vue路由6：导航钩子

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

  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. ADF&lowbar;Database Develop系列2&lowbar;通过UML数据库开发之将Logical UML转为Physical Models

    2013-05-01 Created By BaoXinjian

  2. C&num;完整的通信代码（点对点，点对多，同步，异步，UDP，TCP&rpar;

    C# code namespace UDPServer { class Program { static void Main(string[] args) { int recv; byte[] dat ...

  3. gcc编译出现的问题

    /usr/include/c++/4.8/bits/c++0x_warning.h:32:2: error: #error 解决办法:g++ -std=c++11

  4. CollatingOfData 之 JsonHelper

    1 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System. ...

  5. Centos搭建nginx环境&comma;编译&comma;添加服务&comma;开机启动。

    首先安装所需的安装库,yum -y install gcc gcc-c++ autoconf libtool* openssl openssl-devel 编译的时候,若有提示错误,提示缺少某个库,y ...

  6. Magento入门开发教程

    Modules->模块 Controller->控制器 Model->模型 Magento是这个星球上最强大的购物车网店平台.当然,你应该已经对此毫无疑问了.不过,你可能还不知道,M ...

  7. QE是什么

    量化宽松(Quantitative Easing,简称QE),是一种货币政策,主要指各国央行通过公开市场购买*债券.银行金融资产等做法.量化宽松直接导致市场的货币供应量增加,可视为变相“印钞”.市场 ...

  8. Flask入门笔记&lpar;一&rpar;

    一.程序的基本结构 1.1 最简单的Flask程序 1 2 3 4 5 6 7 8 9 10 11 12 13 14 #coding=utf-8 # 初始化 from flask import Fla ...

  9. XML配置文件的命名空间与Spring配置文件中的头

    一直以来,写Spring配置文件,都是把其他配置文件的头拷贝过来,最多改改版本号,也不清楚哪些是需要的,到底是干嘛的.今天整理一下,拒绝再无脑copy. 一.Spring配置文件常见的配置头 < ...

  10. 禁用了传说中的PHP危险函数之后，Laravel的定时任务不能执行了？

    虽然已是 2018 年,但网上依然流传着一些「高危 PHP 函数,请一定要禁用!」的标题党文章(搜索关键字:一些需要禁用的PHP危险函数). 这些文章的内容简单直接,给出 php.ini 的 disa ...

相关文章