Vue的路由Router之导航钩子和元数据及匹配
2024-09-27 02:55:12
一、文件结构
二、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
})
六、浏览器效果
七、谢谢观看，如有问题，随时交流哦
最新文章
- Opera 浏览器各版本下载地址
- 【先定一个小目标】Redis 安装成windows服务-开机自启
- LINUX下YUM源配置
- Java实现JDBC连接数据库实例
- Struts2 OGNL 自动转换Date类型的一些注意事项
- 在CentOS中快速安装PHP，MySQL，Nginx和phpMyAdmin
- UVa1161 Objective: Berlin（最大流）
- sklearn 组合分类器
- unity3D 搞定任意ios插件
- maven出错The folder is already a source folder
- javascript操作class和style样式
- Android 中View的绘制机制源代码分析 三
- 转摘：常用ubuntu 关机，重启，注销命令
- Android设计模式系列-组合模式
- Python科学计算基础包-Numpy
- subline text3 安装 rem装换工具
- 为什么以sys无法远程登录数据库
- Python 新式类与经典类
- python3之MongoDB
- Linux下MySQL远程链接配置