路由元信息实例 原
时间:2022-06-19
本文章向大家介绍路由元信息实例
原,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
先看官网介绍
定义路由的时候可以配置 meta
字段:
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true }
}
]
}
]
})
那么如何访问这个 meta
字段呢?
首先,我们称呼 routes
配置中的每个路由对象为 路由记录。路由记录可以是嵌套的,因此,当一个路由匹配成功后,他可能匹配多个路由记录
例如,根据上面的路由配置,/foo/bar
这个 URL 将会匹配父路由记录以及子路由记录。
一个路由匹配到的所有路由记录会暴露为 $route
对象 (还有在导航守卫中的路由对象) 的 $route.matched
数组。因此,我们需要遍历 $route.matched
来检查路由记录中的 meta
字段。
看一个完整的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Morris.js Charts</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Morris charts -->
<link rel="stylesheet" href="../../dist/css/Basic.css">
<link rel="stylesheet" href="../../dist/css/lanrenzhijia.css">
</head>
<body class="">
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<div id="app">
<h1>路由元信息</h1>
<router-link to="/foo/bar">Foo</router-link>
<router-link to="/login">login</router-link>
<router-view></router-view>
</div>
</body>
</html>
<script>
var Foo = {
data() {
return {
name: "lily"
}
},
template: `
<div>this is user {{name}}
<router-view></router-view>
</div>`
};
var Bar = {
template: "<div>this is the inner Bar</div>"
}
var Login = {
template: "<div>this is Login </div>",
};
const router = new VueRouter({
routes: [{
path: "/foo",
name: "foo",
component: Foo,
children: [{
path: "bar",
component: Bar,
meta: { requiresAuth: true }
}]
}, {
path: "/login",
name: "login",
component: Login,
}],
})
router.beforeEach((to, from, next) => {
console.log(to.matched);
if (to.matched.some(record => record.meta.requiresAuth)) {
//只要记录上需要验证,我们就要验证,自己封装方法判断登录 如localstorage cookie
//let isLogin = getLoginStatus();
let isLogin = false;
if (!isLogin) {
next({
path: "/login", //如果没有登录跳转到登录页
query: {
redirect: to.fullPath //登录页需要知道从哪跳转过来的,方便登录后回到原页面
}
})
} else {
alert("next")
next() //如果需要验证,并且已经登录则直接跳转
}
} else {
next() //如果不需要验证,则直接跳转
}
})
var app = new Vue({ router }).$mount("#app")
</script>
当点击Foo链接时to.matched是含有2个元素的数组,其中每个元素都是一个对象,下标为0的对象含有path:"/foo" 另一个下标为1的对象含有path:"/foo/bar"与meta:{requiresAuth:true}
(adsbygoogle = window.adsbygoogle || []).push({});
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Kubeflow实战: 入门介绍与部署实践
- matplotlib基础绘图命令之violinplot
- 性能分析(3)- 短时进程导致用户 CPU 使用率过高案例
- stat 命令家族(1)- 详解 vmstat
- 性能测试必备知识(9)- 深入理解“软中断”
- Vue老项目支持Webpack打包
- 09-4 更改用户密码
- 10-3 信号
- 11-1 环境中存储的是什么?
- 【Rust日报】2020-08-07 无船同志关于Rust未来Generator语法的新尝试
- 11-2 环境是如何建立的
- 11-3 激活修改
- 12-1 定制提示符
- MySQL INSERT的4种形态
- PowerBI DAX 性能优化 高级视图算法 超越经典 性能提升成千上万倍