问题标签 [vuejs-routing]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
vue.js - VueJS 路由器不加载组件
真的很困惑为什么这不起作用。我只是详细说明从 CLI 添加路由器的示例。我只想添加一个新的路由调用 common,我创建了一个 Common.vue 文件并将 HTML 从 About.vue 复制到其中。一定是错过了一些愚蠢的东西,但它是什么?
在 app.vue 我有
路由器/index.js
然后是views/common.vue
vue.js - 我的 vuejs 导航守卫没有按预期工作
我正在使用 vuex 进行状态管理这是我的 vuex 代码,
这里我的逻辑是,如果令牌存在于本地存储中,那么它将设置 isAuthenticated 为 true,这样就可以很容易地检查路由。但是有些它是如何不起作用的。
这是我的路由器代码
目前,如果我登录仍然可以进入登录页面,甚至可以在没有身份验证的情况下进入仪表板。
vue.js - 未启用 VueJS 路由器配置
在我的 VueJS 项目中,我在文件“router.js”中配置了路由。
在 main.js 文件中,我启用了这样的路由配置:
这是我的 App.js 文件:
我通过运行“vue-cli-service build”和“npx http-server ./dist”命令来运行该项目。
我注意到当我像这样调用配置的路由器 - “http://localhost:8080/1234/56”时,我收到 404 错误。但是,当我调用默认 URL“http://localhost:8080”时,我得到一个空白页面,因为应用程序在没有任何路由参数的情况下加载。我可以看到添加到 main.js 和 App.js 的 console.log() 语句,但没有看到“personDetails”组件。
我添加了一个默认路由器配置,这似乎工作。
此默认路由加载 'personDetails' 组件,其路径参数映射到 456 和 123。
请给出一些调试提示?
javascript - 安全登录到 Vue.js SPA
我对 Vue.js 很陌生,我学习了很多教程,但有一件事让我很困扰。假设我正在构建一个 SPA。用户可以登录,然后使用 RESTful API 访问数据。
所以第一步是将我的登录信息(用户名、密码)发送到 API 并接收令牌。令牌将保存到我的 vuex 以及本地存储/cookie 中,以便用户在页面刷新后保持登录状态。
对 API 的所有其他请求都将由令牌签名。
我的路线已设置:
我正在使用路由保护来保护 /dashboard 页面不显示给未登录的用户:
我担心的是来自 vuex 商店的loggedIn getter,它是通过这种方式实现的:
一切都按预期工作。我知道如果没有访问令牌,我将无法从服务器获取数据。
但...
我可以打开开发人员工具,将 access_token 放入我的本地存储中,随机值,刷新页面,突然我可以访问 /dashboard 页面。
所以我的问题是,如何避免这种情况?
我的第一个想法是,有 2 个页面 - 登录页面和包含 SPA 的第二个页面。身份验证将通过会话服务器端完成,SPA 页面只能由登录用户访问。
还是有一些标准的方法来解决这个问题,所以我的 SPA 可以处理这个?
javascript - 我不明白为什么一旦我尝试将 div 标签绑定到我的代码中的 v-for 指令,它就会停止可见
问题出在带有类日志的 div 标签上,我正在尝试使用从 api 响应中获取的数据填充文本。当我尝试包含 v-for 指令时,整个 div 将从浏览器中消失,并且控制台没有抛出任何错误。
vuejs2 - v-else 在 Vue JS 中首先呈现,而不是 v-if
我有一个如下所示的 HTML 元素
showOriginalContent 的初始值为 false 并且从挂载的方法调用另一个方法,我将根据某些条件将 showOriginalContent 的值设置为 true。目前,即使 showOriginalContent 为真,我也可以看到 v-else 在 v-if 在 DOM 中呈现之前显示了几分之一秒。我该如何解决这个问题?我试图将函数调用移至所有其他生命周期方法,但没有任何效果。我已经在vue js中经历了导航方法之前和之后,是否可以在这里应用该逻辑?
vue.js - 如何在路由链接Vuejs中添加类和图标
我有一个路由链接 vuejs :
我想在该路由链接中添加类:class="btn btn-primary"
和图标。请给我一些想法。谢谢
vue.js - 有没有办法在 vuejs 路由器中拥有动态路由/组件?
嗨,漂亮的 Vuejs 开发人员! 我在动态路由许多 Vue 组件/页面时遇到了一点问题。在这种情况下,我使用嵌套路由来为我的布局组件设置几条路由,为我的页面设置数百条子路由,正如您可以想象的那样,我必须静态或手动输入许多子路由,然后在我添加更多路由时添加在未来的代码更改中需要更多子路由,但我需要一个解决方案来简化/解决这个问题,以更有效/更好的方式,比如在 url 布局后添加用户类型的路由......这是我的示例代码代码:
正如您在这段代码中看到的那样,我有一个名为 Student 的布局,它有两个孩子,但我必须为此布局手动输入数百个子路由,其他布局有什么方法可以使用用户输入的内容动态设置这些路由/student/dashboard 或 /layout/page 之类的布局名称并将其与组件名称匹配?我的意思是像 Angular 中的参数一样,我可以在路由器内部使用参数值本身来表示吗?
让我知道是否有解决此问题的有效方法。提前致谢!