问题标签 [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.

0 投票
1 回答
207 浏览

vue.js - VueJS 路由器不加载组件

真的很困惑为什么这不起作用。我只是详细说明从 CLI 添加路由器的示例。我只想添加一个新的路由调用 common,我创建了一个 Common.vue 文件并将 HTML 从 About.vue 复制到其中。一定是错过了一些愚蠢的东西,但它是什么?

在 app.vue 我有

路由器/index.js

然后是views/common.vue

0 投票
1 回答
2135 浏览

vue.js - 如何部署 Vue.JS MPA(多页面应用程序)

我使用 vue.js 和 vue.config.js 方法创建了一个多页面应用程序我开发它没有问题我创建了一个生产版本我可以访问主页但是我无法访问其他页面,例如关于我们、投资组合等。

可能是什么问题??以及如何解决?是关于 .htacess 的吗?

这是我的 vue.config.js 代码

这是我的文件结构 在此处输入图像描述

生产文件

在此处输入图像描述

0 投票
2 回答
1052 浏览

vue.js - 我的 vuejs 导航守卫没有按预期工作

我正在使用 vuex 进行状态管理这是我的 vuex 代码,

这里我的逻辑是,如果令牌存在于本地存储中,那么它将设置 isAuthenticated 为 true,这样就可以很容易地检查路由。但是有些它是如何不起作用的。

这是我的路由器代码

目前,如果我登录仍然可以进入登录页面,甚至可以在没有身份验证的情况下进入仪表板。

0 投票
2 回答
50 浏览

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。

请给出一些调试提示?

0 投票
1 回答
360 浏览

javascript - 安全登录到 Vue.js SPA

我对 Vue.js 很陌生,我学习了很多教程,但有一件事让我很困扰。假设我正在构建一个 SPA。用户可以登录,然后使用 RESTful API 访问数据。

所以第一步是将我的登录信息(用户名、密码)发送到 API 并接收令牌。令牌将保存到我的 vuex 以及本地存储/cookie 中,以便用户在页面刷新后保持登录状态。

对 API 的所有其他请求都将由令牌签名。

我的路线已设置:

我正在使用路由保护来保护 /dashboard 页面不显示给未登录的用户:

我担心的是来自 vuex 商店的loggedIn getter,它是通过这种方式实现的:

一切都按预期工作。我知道如果没有访问令牌,我将无法从服务器获取数据。

但...

我可以打开开发人员工具,将 access_token 放入我的本地存储中,随机值,刷新页面,突然我可以访问 /dashboard 页面。

所以我的问题是,如何避免这种情况?

我的第一个想法是,有 2 个页面 - 登录页面和包含 SPA 的第二个页面。身份验证将通过会话服务器端完成,SPA 页面只能由登录用户访问。

还是有一些标准的方法来解决这个问题,所以我的 SPA 可以处理这个?

0 投票
2 回答
46 浏览

javascript - 我不明白为什么一旦我尝试将 div 标签绑定到我的代码中的 v-for 指令,它就会停止可见

问题出在带有类日志的 div 标签上,我正在尝试使用从 api 响应中获取的数据填充文本。当我尝试包含 v-for 指令时,整个 div 将从浏览器中消失,并且控制台没有抛出任何错误。

0 投票
2 回答
378 浏览

vuejs2 - v-else 在 Vue JS 中首先呈现,而不是 v-if

我有一个如下所示的 HTML 元素

showOriginalContent 的初始值为 false 并且从挂载的方法调用另一个方法,我将根据某些条件将 showOriginalContent 的值设置为 true。目前,即使 showOriginalContent 为真,我也可以看到 v-else 在 v-if 在 DOM 中呈现之前显示了几分之一秒。我该如何解决这个问题?我试图将函数调用移至所有其他生命周期方法,但没有任何效果。我已经在vue js中经历了导航方法之前和之后,是否可以在这里应用该逻辑?

0 投票
2 回答
190 浏览

vue.js - 如何在路由链接Vuejs中添加类和图标

我有一个路由链接 vuejs :

我想在该路由链接中添加类:class="btn btn-primary"图标。请给我一些想法。谢谢

0 投票
0 回答
183 浏览

firebase - 如何使用vue js将导出excel数据导入firebase

我是一个学习Vue Js的新手,我正在使用 firebase 创建一个简单的人力资源应用程序。我被困在需要将数据导入到Vue js 应用程序中的firebase/firestore的点上。我只是使用带有 Firebase 的Quasar框架,没有任何特定的后端,如 Node Js 或 Laravel。

我在网上搜索了很多文章,但没有一个能解决我的问题。我不确定如何继续使用节点 js 或其他东西。

我的代码结构如下:

在此处输入图像描述

我想在索引页面上添加一个按钮,我可以在其中将 excel 文件数据导入到 firebase/firestore

0 投票
1 回答
56 浏览

vue.js - 有没有办法在 vuejs 路由器中拥有动态路由/组件?

嗨,漂亮的 Vuejs 开发人员! 我在动态路由许多 Vue 组件/页面时遇到了一点问题。在这种情况下,我使用嵌套路由来为我的布局组件设置几条路由,为我的页面设置数百条子路由,正如您可以想象的那样,我必须静态或手动输入许多子路由,然后在我添加更多路由时添加在未来的代码更改中需要更多子路由,但我需要一个解决方案来简化/解决这个问题,以更有效/更好的方式,比如在 url 布局后添加用户类型的路由......这是我的示例代码代码:

正如您在这段代码中看到的那样,我有一个名为 Student 的布局,它有两个孩子,但我必须为此布局手动输入数百个子路由,其他布局有什么方法可以使用用户输入的内容动态设置这些路由/student/dashboard 或 /layout/page 之类的布局名称并将其与组件名称匹配?我的意思是像 Angular 中的参数一样,我可以在路由器内部使用参数值本身来表示吗?

让我知道是否有解决此问题的有效方法。提前致谢!