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 })

六、浏览器效果

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

原文地址:https://www.cnblogs.com/zui-ai-java/p/11140113.html

时间: 2024-09-30 02:39:38

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

vue路由6:导航钩子

<div id="app"> <div> <router-link to="/">首页</router-link> <router-link to="/login">登录</router-link> <router-link to="/post">帖子管理</router-link> </div> <div>

vue路由-router

VueRouter基础 vue路由的注册 导入 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> # 可以是下载之后的 <script src="vue.min.js"></script> <script src="vue-router.js"></script> 定义一个匹配规则对

vue中this.$router.push()路由传值和获取的两种常见方法

1.路由传值   this.$router.push() (1) 想要导航到不同的URL,使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的URL (2)当点击 <router-link> 时,这个方法会在内部调用,即点击 <router-link :to="..."> 等同于调用 router.push(...) a)      声明式:<router-link :to=&quo

Vue路由编程式导航以及hash模式

import Vue from 'vue'; import App from './App.vue'; //引入公共的scss 注意:创建项目的时候必须用scss import './assets/css/basic.scss'; //请求数据 import VueResource from 'vue-resource'; Vue.use(VueResource); import VueRouter from 'vue-router'; Vue.use(VueRouter); //1.创建组件

Vue里面提供的三大类钩子及两种函数

在路由跳转的时候,我们需要一些权限判断或者其他操作.这个时候就需要使用路由的钩子函数. 定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数. 总体来讲vue里面提供了三大类钩子,两种函数1.全局钩子2.某个路由的钩子3.组件内钩子 两种函数: 1.Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/ 2.Vue.afterEach(function(to,form))/*在跳转之后判断*/ 全局钩子函数 顾名思义,它是对

vue.js路由

Vue.js 路由 Vue.js 路由允许我们通过不同的 URL 访问不同的内容. 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA). Vue.js 路由需要载入 vue-router 库 中文文档地址:vue-router文档. 安装 1.直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js NPM 推荐使用淘宝镜像: cnpm install vue-route

vue.js路由vue-router(一)——简单路由基础

前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义组件路由之间的跳转,还可以设置稍复杂的嵌套路由,创建真正的spa(单页面应用).我之前用vue-cli脚手架写了一个简单的人员管理实例,现在我们不用脚手架,就用原生的vue来写,本文也主要是通过实例来讲解vue.js+vue-router相关知识. 简单路由跳转实例 1.起步 下载vue-route

vue-router有哪几种导航钩子 keep-alive的详细用法 解决跨域

1===>vue-router有哪几种导航钩子? 第一种:是全局导航钩子:router.beforeEach(to,from,next) 第二种: 组件内的钩子 beforeRouteEnter(to, from, next) { 在渲染该组件的对应路由被 confirm 前调用 }, beforeRouteUpdate(to, from, next) { 在当前路由改变,但是依然渲染该组件是调用 }, beforeRouteLeave(to, from ,next) { 导航离开该组件的对应路

vue-router有哪几种导航钩子( 导航守卫 )?

问题一:vue-router有哪几种导航钩子( 导航守卫 )? 1.全局守卫: router.beforeEach 2.全局解析守卫: router.beforeResolve 3.全局后置钩子: router.afterEach 4.路由独享的守卫: beforeEnter 5.组件内的守卫: beforeRouteEnter.beforeRouteUpdate (2.2 新增).beforeRouteLeave 导航表示路由正在发生改变,vue-router 提供的导航守卫主要用来:通过跳转