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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>title</title>
 8 </head>
 9 <body>
10     <div id="app">
11         <h1>元数据及路由匹配</h1>
12 
13        <router-link to="/">首页</router-link>
14        <router-link to="/login">登录</router-link>
15        <router-link to="/post">帖子管理</router-link>
16        <router-link to="/a">A</router-link>
17 
18 
19        <router-view></router-view>
20     </div>
21     
22 
23     <script src="../lib/vue.js"></script>
24     <script src="../lib/vue-router.js"></script>
25     <script src="js/app.js"></script>
26 </body>
27 </html>

五、app.js

  1 var routes = [
  2     {
  3         path:"/",
  4         component:{
  5             template:`
  6                 <h1>首页</h1>
  7             `
  8         }
  9     },
 10     {
 11         path:"/a",
 12         // 设置元数据属性,下面表示需要登录后才可以路由到/post
 13         meta:{
 14             login_required:true
 15         },
 16         component:{
 17             template:`
 18                 <h1>A</h1>
 19             `
 20         }
 21     },
 22     {
 23         path:"/login",
 24         component:{
 25             template:`
 26                 <h1>登录</h1>
 27             `
 28         }
 29     },
 30     {
 31         path:"/post",
 32         // 设置元数据属性,下面表示需要登录后才可以路由到/post
 33         meta:{
 34             login_required:true
 35         },
 36         component:{
 37             template:`
 38                 <div>
 39                 <h1>帖子管理</h1>
 40                 
 41                 <router-link  to="look" append>查看帖子</router-link>
 42                 <router-view></router-view>
 43                 </div>
 44             `
 45         },
 46         children:[
 47             {
 48                 path:"look",
 49                 component:{
 50                     template:`
 51                         <h2>这是今天写的一个帖子</h2>
 52                     `
 53                 }
 54             }
 55         ]
 56     },
 57 ];
 58 
 59 var router = new VueRouter({
 60     routes
 61 });
 62 
 63 router.beforeEach(function(to,from,next){
 64 
 65 // VueRouter对象的beforeEach(function(to，from,next){})方法和afterEach(function(to，from){}),
 66 // 称为导航钩子，可以控制访问权限和验证
 67 // 里面的回调函数可以在路由前和路由后进行操作处理
 68 
 69     logged_in = false;
 70     // 方法一：导航钩子，来进行路由前的验证
 71     // if(!logged_in && to.path == "/post"){
 72     //     next("/login");
 73     // }else{
 74     //     next();
 75     // }
 76 
 77 
 78     // vue提供了一个matched属性，得到的是一个数组，比如子路由/post/look，就匹配/post/look和/post
 79     // console.log("to.matched：",to.matched);
 80 
 81     // js数组有一个some方法，方法里可以用回调函数，来遍历处理数组的每项
 82         // to.matched.some(function(item){
 83 
 84         // })
 85 
 86     // 方法一验证了/post,如果含有子路由，比如/post/look,则没法验证，所以必须保证父路由及其后面所有的子路由
 87     // 都能接受验证
 88     // 解决方法：迭代数组里的每一项，只要有一项的path是/post,就跳向登录界面
 89     // 方法二
 90         // if(!logged_in && to.matched.some(function(item){
 91         //     return item.path == "/post"
 92         // })){
 93         //     next('/login');
 94         // }else{
 95         //     next()
 96         // }
 97 
 98 
 99     // 第二种方法：写死了，对于一个页面(比如/post及其子路由)的验证是可以的，
100     // 但如果有多个路由（比如还有/a），就又得再写验证
101 
102     // 方法三：在组件内设置元数据，更灵活
103         if(!logged_in && to.matched.some(function(item){
104             return item.meta.login_required
105         })){
106             next("/login");
107         }else{
108             next();
109         }
110 });
111 
112 new Vue({
113     el:"#app",
114     router
115 })

六、浏览器效果

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

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

猜你喜欢