- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
根据 VueRouter 文档,可以添加 meta fields并根据其值全局限制路由。
按照概述尝试实现后,出现错误:
ReferenceError: record is not defined (line 46)
对应这一行:
if (!hasCookies(record.meta.cookies)) {
这是包含路由保护逻辑的文件:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{
path : '/authenticate/:id',
component : require ('./components/authenticate.vue'),
redirect: '/here',
},
// can only get here if the passcode has been filled out
{
path : '/client/create',
component : require('./components/createClientForm.vue'),
meta : {
cookies: ['passcode_cookie'], // need passcode to be able to create the client
redirect: '/authenticate/1' // dummy value here for now
}
},
// can only get here if passcode and client form have been completed
{
path : '/test/:id',
component : require('./components/runTest.vue'),
meta : {
cookies : ['passcode_cookie', 'client_cookie'],
redirect : '/client/create'
}
}
];
const router = new VueRouter ({
routes,
mode: 'history',
});
function hasCookies (cookies) {
return cookies.every(cookie => document.cookie.indexOf(cookie) !== -1);
}
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.cookies)) {
// this route requires cookies, check if cookies exist
if (!hasCookies(record.meta.cookies)) {
next({
path : record.meta.redirect || '/',
})
} else {
next();
}
} else {
next(); // make sure to always call next()!
}
});
const app = new Vue ({
router
}).$mount('#app');
知道我可能做错了什么吗?
最佳答案
这里的错误是不言自明的。变量 record
不在范围内,它不是函数参数,也不是全局变量。 record
仅在您传递给 some
的回调函数中定义。它超出了发生错误的范围。
试试这个:
const record = to.matched.find(record => record.meta.cookies && !hasCookies(record.meta.cookies));
if (record) {
next({ path: record.meta.redirect || '/' });
} else {
next();
}
关于vue.js - VueRouter 和元字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45246851/
我在新 Vue.js 项目上运行测试期间收到警告。无论组件在模板中的何处使用路由器作为 或编程为 this.$router.push('/'); 测试通过但记录这些警告: ERROR LOG: '[V
VueRouter 总是在子路由路径前添加一个尾部斜杠。所以假设我有一个这样的路由配置: const routes = [ path: '/home', components: {
使用 VueRouter,我想启用对这些 URL 的访问: 类别/苹果 类别/香蕉 类别/梨 是否可以将路由器参数限制为某些字符串? (香蕉、苹果、梨)? 我在文档中找不到专门与此相关的任何内容。我用
我正在使用 laravel、vue 和 vue router 构建一个电子商务项目 我想使用具有历史模式的 vue router,但这给我带来了麻烦。 这是我的代码 new Vue({ el:
我正在使用 VueRouter 根据 URL 加载模板。当我尝试在组件中使用 app.data 中定义的属性时,我收到一个 [VueWarn] 未定义属性或方法“Angular 色”。 如何将每个数据
在前端大部分是新的,在 Vue 中绝对是新的。我正在尝试从 URL 读取查询参数。下列的 How can I get query parameters from a URL in Vue.js?和 h
我正在学习 VueJS,使用 vue-cli 创建了一个新的 Vue 应用程序,并对其进行了一些更改。这是我的 router.js 中的内容: import Vue from 'vue' import
根据 VueRouter 文档,可以添加 meta fields并根据其值全局限制路由。 按照概述尝试实现后,出现错误: ReferenceError: record is not defined (
我有一个 laravel 项目,想使用 Vue.js 作为前端。但是我从来没有用过比 jquery 更复杂的东西。我无法运行 vue-router。 在我的 app.js 中 require('./b
我正在研究 Vue.js/Laravel8项目 single page app无法获得 VueRouter滚动到 section我想。该页面由不同的 sections 组成如果用户向下滚动并且我想要
是否可以在 Vue 组件之外访问 VueRouter。 我尝试在 JavaScript 文件中导入 Vue。在此文件中,我可以访问 Vue.http,但不能访问 Vue.router 或 Vue.$r
我目前正在逐步使用 VueJS 和 VueRouter 创建注册。 该表单的基本前提是用户必须在继续输入其个人详细信息之前选择一个注册选项。但是,我希望每次选择不同的注册选项时都能重置表单。 VueJ
我刚开始使用 Vue 和 Vue Router,但它很容易上手。这是我目前遇到的问题。我设置了一个 VueRouter 并为每个路径设置了一个组件。 当我第一次加载我的应用程序时,我尝试执行一个操作。
我正在使用 html5 推送状态和 VueRouter。当我进入谷歌网站管理员工具并使用渲染抓取网站时,只有 之外的内容标记已呈现...我试过使用 Prerender.io,它似乎不适用于 VueJ
我正在开发一个小型服务,它将使用当前路由的查询参数。 不幸的是,VueRouter 似乎没有 route 参数,所以我无法访问我在服务中需要的信息。 import router from "../ro
我是 VueJs 的新学生,我想在其中制作一个菜单和一个二级菜单。我想使用 Jquery-MetisMenu,所以我下载了它,将它放在我的 Index.html 上,然后我制作了一个菜单 View 的
我已将 Cypress Vue 组件测试运行器添加到现有的 Vue(vite) 应用程序中。但是,当我运行测试时,我收到一个错误消息,指出我的组件中的 $route 未定义。我的组件测试设置是否遗漏了
我的 Vue webapp 中的 main.js 文件中有以下代码: const routes = { name: "Main", path: "/main", redirect: "/m
我正在尝试获取查询参数 code ,但是 $route.query总是空的。我根据文档使用了功能模式。有什么不见了? 路由器: // use vue-router import Router from
我想将一个独立的 Vue 应用程序移植到一个更大的 Java Spring Web 项目中。 Vue 应用程序将 Vue 路由器作为依赖项。当我尝试加载主页时,我得到一个 [Vue warn]: Er
我是一名优秀的程序员,十分优秀!