用于查询更改的vue.js路由器NavigationDuplicated
Vue.js是一种流行的JavaScript框架，用于构建用户界面。Vue.js路由器是Vue.js框架的一部分，用于管理应用程序的路由。它允许开发人员根据URL的变化动态地加载不同的组件，从而实现单页应用程序的导航。
NavigationDuplicated是Vue.js路由器的一个错误类型。当尝试在路由器中进行重复的导航时，就会抛出NavigationDuplicated错误。这通常发生在用户快速点击导航链接或使用浏览器的前进/后退按钮时。
NavigationDuplicated错误的出现是为了防止重复导航，以提高应用程序的性能和用户体验。当出现这个错误时，开发人员可以采取以下措施来解决问题：
- 检查导航链接的触发方式：确保导航链接只能通过用户的显式操作触发，而不是通过自动化或重复的程序触发。
- 添加导航守卫：使用Vue.js路由器的导航守卫功能，可以在导航发生之前或之后执行自定义逻辑。通过在导航守卫中检查导航的唯一性，可以避免重复导航。
- 优化用户界面：如果用户快速点击导航链接是因为界面响应缓慢，可以考虑优化界面性能，以减少用户的等待时间。
腾讯云提供了一系列与Vue.js和路由器相关的产品和服务，可以帮助开发人员构建高性能的Vue.js应用程序。以下是一些推荐的腾讯云产品和产品介绍链接：
- 云服务器（CVM）：提供可扩展的虚拟服务器实例，适用于部署Vue.js应用程序和路由器。详情请参考：云服务器产品介绍
- 云数据库MySQL版（CDB）：提供高性能、可扩展的MySQL数据库服务，适用于存储Vue.js应用程序的数据。详情请参考：云数据库MySQL版产品介绍
- 云存储（COS）：提供安全可靠的对象存储服务，适用于存储Vue.js应用程序的静态资源文件。详情请参考：云存储产品介绍
请注意，以上推荐的腾讯云产品仅供参考，开发人员可以根据实际需求选择适合的产品和服务。
相关·内容
我的html格式的路由器是 <div>
<transition name="slide-fade">
<router-view :key="$route.fullPath"></router-view>
</transition>
</div> Vue.js代码： this.$router.push({ path : this.$route.matched[0
浏览 51提问于2019-10-02得票数 3
我需要关于NavigationDuplicated错误和Vue.js的帮助。我正在开发一个web应用程序，我允许用户在不同的页面之间导航。
我得到了"NavigationDuplicated“错误，即使我没有推动相同的网页。具体来说，我得到的错误是：
消息：“不允许导航到当前位置("/faq/new")”，名称："NavigationDuplicated"，.
我的路由器代码如下：
import Vue from "vue";
import VueRouter from "vue-router";
import
浏览 5提问于2020-08-16得票数 1
我正在用vue.js和vuex和vue路由器在Laravel做一个SPA。我在我的商店中做了一个登录操作，但是当我使用无效的凭证登录时，会发生一些非常奇怪的事情。当我使用正确的凭据登录时，它可以正常工作。
因此，它将调试以下内容
登录
app.js:279发布 401 (未经授权)
app.js:58018登录成功
app.js:58023登录失败
app.js:43201 Uncaught (承诺) NavigationDuplicated {_name：" NavigationDuplicated "，名称："NavigationDuplicated"，消息
浏览 0提问于2019-10-10得票数 2
回答已采纳
当前url为 /search 新的url应该是 /search?foo=bar 我只想更新我的查询参数在相同的路线上，作为在页面上应用一些过滤器的结果 我的代码： this.$router.push({query: params}) 有一种方法可以使用catch块来处理"NavigationDuplicated“错误，但这只会抑制错误，路由中的查询参数仍然不会更新。 相关问题： How to use router.push for same path, different query parameter in Vue.js 但这给出了路径'/‘，但我需要保持相同的立场
浏览 15提问于2020-01-18得票数 4
1回答
我目前正在制作一个表单，其中我有一个按钮"Save“，我要做的是验证数据，如果保存成功，我试图将用户重定向到同一个页面，但它不起作用(例如:从这个页面到这个页面)。
到目前为止，我已经尝试过了：
this.$router.push('/add-new-entity')
我知道这个错误：
NavigationDuplicated {_name："NavigationDuplicated"，名称："NavigationDuplicated"，消息：“不允许导航到当前位置("/add_new_entity")，堆栈："
浏览 3提问于2019-11-30得票数 2
1回答
所以我想到了制作一个Jekyll SPA博客
并以某种方式利用React.js /React.js路由器或Vue.js / Vue路由器来实现SPA路由的感觉。
是否有可能做到这一点，如果是的话，我将在哪里导入和使用路由器？
浏览 1提问于2017-10-25得票数 0
回答已采纳
2回答
我正在使用带有Nuxt.js的Vue.js，但是我在路由器的功能上遇到了问题。
在纯Vue中，我可以这样用main.js编写：
val route = new Router({
routes:{
[...]
}
})
route.beforeEach(to,from,next){
//do something to validate
}
如何在nuxt.js中做同样的事情呢？我找不到任何像main.js这样的文件。
另外，我只知道处理pages文件夹来实现路由器，我不能设置重定向路径
请帮帮忙，thx :)
浏览 2提问于2017-08-04得票数 17
回答已采纳
有了vue.js和vue-路由器，是否有一种方法可以在单击“路由器链接”后重新创建一个组件，从而导致与当前路由相同的路由？
基本上，如果单击指向当前路由的“路由器链接”可以重新启动组件的“已创建()”或“挂载()”函数，那就太好了。
也许有一个"$watch“的把戏，或者类似的，我真的不知道！
浏览 1提问于2018-04-09得票数 2
回答已采纳
2回答
我想使搜索页面后，我点击它的按钮将被重定向到另一个页面。这个页面将会是这样的
http://localhost:8080/search?q=foo
我的路由器index.js看起来像这样
const routers = [
{
path: '/search',
name: 'Search',
component: SearchPage,
props: route => ( { query: route.query.q } )
}
]
问题是如何在Vue.js 3中获取目标页面SearchPage中的查询值？这个仍然让
浏览 34提问于2021-02-18得票数 3
回答已采纳
我对Vue.js完全陌生，我想我对路由器是如何工作的有一些了解，比如：
<router-link to="/">
但我并不真正理解下面这行是做什么的：
<router-view :key="$route.fullPath"></router-view>
我相信路由器视图本身就可以确保显示内容，但是关键部分是什么意思呢？
浏览 4提问于2018-10-17得票数 28
回答已采纳
2回答
我用Vue.js做小的一个页面的应用程序或者小型的components.But，现在我试图用它来构建一个应用程序的整个前端，而我的项目的架构遇到了一些麻烦。
我应该为每个页面创建一个组件吗？(比如vue路由器文档)，比如HomePage，ArticlePage，LoginPage，ContactPage等等？
但是，我如何用这么多组件来组织组件文件夹呢？
我想知道是否有一些大型vue.js应用程序的典型架构？
以下是我目前的架构：
浏览 7提问于2016-10-13得票数 2
回答已采纳
在我的Laravel 5.8 / "vue"："^2.6.10"/ "vuex"："^3.1.0“应用程序中，在resources/js/components/Login.vue文件中，我有一个方法
methods: {
authenticate() {
this.$store.dispatch('login'); // calling action
login(this.$data.form)
.then((res) => {
浏览 12提问于2019-10-24得票数 5
回答已采纳
我一直试图弄清楚如何自动处理来自动态创建的数据库(MySql)的迁移和查询。我有一个动态路由器，可以在到数据库的路由前面加上名称来执行查询。但后来我找到了。
using(...)函数是否消除了对路由器的需求？还是using(...)提供了在路由器的下列方法中评估的信息，特别是model._meta.app_label：
def db_for_read(self, model, **hints):
"""
"""
if model._meta.app_label == 'db_name':
r
浏览 7提问于2015-03-05得票数 0
回答已采纳
1回答
我使用nuxt.js + vue.js。我需要创建路由器的大小写敏感性。我找到了以下属性: caseSensitive。我正在尝试将其放入nuxt.config中，但它不起作用，通过大写链接可以实现转换。如果我直接更改文件~project/..nuxt/router.js，一切都会正常工作。帮我弄清楚。
router: {
extendRoutes (routes) {
for (let key in routes) {
routes[key]['caseSensitive'] = true
}
}
浏览 2提问于2019-08-14得票数 5
回答已采纳
1回答
我正在尝试使用Vue.js和路由器将一个数组从查询传递到后端。
我有这样的方法：
submitForm () {
this.$router.push({
name: 'AuctionResult',
query: {
models: this.selectedModels.map(e => e.value)
}
})
},
结果是这样的查询：?models=MODEL1&models=MODEL2...，但是如何使输入看起来像数组，比如：?models[]=MODEL1&models[]=MODEL2...？
我
浏览 2提问于2018-06-05得票数 4
回答已采纳
我有一个基于TypeScript的Vue.js项目，使用VisualStudio2017作为我的Vue.js。
这是‘路由器/index.js’文件：
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import TimeSheet from '@/components/TimeSheet'
Vue.use(Router)
export default new Router({
rout
浏览 0提问于2018-08-29得票数 1
回答已采纳
1回答
我有一个PHP应用程序，它对用户进行身份验证，执行MySQL查询，并依赖于$_SESSION cookie。
一切都很好，但我意识到我需要做更多的前端，因此不得不使用Vue.js和websockets。
因此，我使用node.js作为主域localhost (为了生产目的)。
我在localhost:8080上提供了PHP，这样Vue.js就可以与PHP后端通信。
现在，我的问题是
如何在Vue/Websocket中使用/存储$_SESSION ID，并将其与向PHP发出的每个请求一起发送？
我对堆栈溢出进行了一些研究，发现session_id()可以返回当前会话ID，但我不知道如何将PHP与
浏览 1提问于2018-03-04得票数 0
1回答
我用Webpack和Vue.js一起创建了一个大规模的网络应用程序.我遇到的问题如下：
我使用的是vue-路由器和主要应用程序模板的以下结构：
<customNav></customNav>
<router-view></router-view>
导航是一个文件组件，它在组件文件中定义了自己的样式。假设默认情况下它有一个黑色的背景。现在，在单个情况下(当通过路由器显示不同的视图时)，我希望它是透明的。
我想我可能只是在路由器视图组件中覆盖CSS，但这不起作用，因为Webpack正在捆绑我导入的所有组件的CSS，并且我必须导入main.js中的所有
浏览 3提问于2016-11-29得票数 2
回答已采纳
1回答
用Vue.js编写一个chrome扩展，我需要根据用户操作更改视图。
通常情况下，我会用Vue路由器来神奇地抽象出所有这些逻辑.但是，路由器被绑定到URL。
有可能以任何方式改变这种行为吗？
也就是说，<router-view/>和往常一样在App.vue中，但是当用户通过扩展单击时，路由器并不是在浏览器地址栏中监视URL，而是选择其他对象吗？
浏览 4提问于2021-02-20得票数 1
回答已采纳
假设我有这样一个Vue.js组件：
var Bar = Vue.extend({
props: ['my-props'],
template: '<p>This is bar!</p>'
});
当vue-路由器中的某个路由匹配如下时，我想使用它：
router.map({
'/bar': {
component: Bar
}
});
通常，为了将'myProps‘传递给组件，我会执行如下操作：
Vue.component('my-bar', Bar)
浏览 12提问于2016-06-21得票数 74
回答已采纳
我是用vue.js开发主题的新手，我想知道如何在从Vue.js路由器中删除hashbang和html5历史模式之后如何配置wordpress？
另一个问题是在这个设置上，我如何使用Vue.js来执行SSR？
我使用Vue.js作为主题，但是如果您知道React或类似前端框架的技术，也请分享它。
浏览 0提问于2016-07-07得票数 2
2回答
Vue.js :如何加载依赖组件？
来自当前使用组件的路由器，如下所示：
import A from './A';
export default {
components : {
'new-comp-A' : NewCompA
}
}
...
但这会在导入之前呈现模板，从而导致错误。是否有更好的方法来加载依赖项？
模板使用的是-正确注册组件吗？
浏览 0提问于2019-04-21得票数 2
回答已采纳
我有一个内容管理系统支持的网站，其中Vue.js被添加到处理网站的用户界面功能。该功能具有切换页面内容的选项卡。我需要使标签的深度链接，因为在需要有一种方法，有一定的标签设置为活动的页面加载。我可以使用URL很容易地实现这一点，但我想看看是否可以只使用Vue.js路由器。我还没有找到任何资源来将路由器添加到一个不是完全由Vue.js支持的现有站点。
有没有办法在不进行任何额外服务器配置的情况下添加vue-router？
浏览 2提问于2017-11-28得票数 0
1回答
所以我有一个活跃的Vue.js SPA。我想动画之间的每个‘页面’之间的过渡。我将路由器封装在转换标记中，如下所示：
<transition name="example">
<router-view></router-view>
</transition>
然后我应用一些css，如下所示：
.example-enter, .example-leave-to{
opacity:0;
}
.example-leave, .ex
浏览 2提问于2018-01-04得票数 0
回答已采纳
2回答
我是Vue.js的新手，遇到过这个问题。
我用App.vue编写了这段简单的代码
<div v-for="brand in response" v-bind:key="brand.BrandId">
<router-link v-bind:to="{name: 'brand', params: {brandId: brand.BrandId } }">
{{brand.Name}}
</router-link>
</div>
<router-vi
浏览 22提问于2020-02-04得票数 2
回答已采纳
当使用cli和vue路由器构建vue.js应用程序时，我们可以将mode: 'history'传递到路由器，这将从url中删除散列。但是在通过cdn使用vue时，如何从url中删除#，例如在中
浏览 2提问于2020-06-09得票数 0
回答已采纳
我试图在Vue.js CLI表中使用分页和我有API后端和所有内容的页面。现在我有了带有"?page=1“的URL，当我单击browser back按钮时，我的表和分页呈现在相同的页面上，什么是URL。现在，在浏览器返回按钮上，只更改URL，但内容保持不变。但是我听说Vue路由器有一个全局修复程序，有人知道怎么做吗？
浏览 2提问于2020-03-26得票数 0
回答已采纳
在我的应用程序中有路由/myPath。我希望它只能通过路由器连接才能访问。否则，如果用户试图直接访问，他将被重定向到“未找到”页面。
这与Vue.js路由器的功能/功能是可能的吗？
浏览 0提问于2019-10-10得票数 0
我正在审查Vue和它的路由器组件，尽管我在让路由器组件工作时遇到了一些问题。控制台出现以下错误：
未定义的ReferenceError:路由器未定义
大家好，
我正在将Vue和VueRouter导入到index.html中，并尽力阅读文档以使路由器初始化，但似乎无法工作。
在index.html中
<script type="module" src="/assets/js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue
浏览 1提问于2019-08-09得票数 2
新的Vue.js 3.0插件架构很好，但它似乎缺少一个路由器插件。如果我在第一次创建项目(vue create my-project)时选择不安装路由，我希望以后可以改变主意，使用vue add @vue/router之类的东西添加路由，但那个插件似乎并不存在。有没有办法在事后从CLI添加路由？
浏览 1提问于2018-05-01得票数 29
我正在尝试将一个vue.js应用程序集成到一个typo3页面中。 我有一个功能齐全的TYPO3实例，我可以在其中创建自己的页面，编辑内容等等。现在我想在这个页面中添加一个现有的vue.js应用程序。 因此，我创建了一个扩展，它添加了所有必要的资源(js、css)，并添加了自己的内容类型来控制集成和配置。内容类型输出一个vue.js入口点。到目前为止，一切都正常。较小的vue.js应用程序按其应有的方式工作。 现在挑战来了:当我想要创建一个依赖于路由器功能的更复杂的应用程序时，我遇到了一个问题。 假设我将我的应用程序集成到页面/shop中，并且我的应用程序试图在/shop/product/so
浏览 15提问于2020-11-27得票数 0
回答已采纳
我正在开发我的Vue.js应用程序，并且在使用vuex路由器同步通过API获取数据时遇到了麻烦。
正如我在每个教程或示例中看到的那样，在created组件钩子上分派存储操作是很常见的事情。在我的例子中，这似乎不是一种选择，原因如下：
我使用标准的vue路由器进行路由，当我在页面之间导航时，不仅我的内容应该改变，而且我的侧边栏和标题也应该改变。因此，我实现了命名路由器视图的概念，如
routes: [{
path: '/',
components: {
page: Home,
sidebar: GeneralSide
浏览 0提问于2017-01-24得票数 3
3回答
我正在开发一个带有Vue.js及其官方路由器的单页应用程序。
我使用路由器加载的每个部分都有一个菜单和一个组件(.vue文件)。在每个组件中，我都有一些类似如下的代码：
<template>
<div> <!-- MY DOM --> </div>
</template>
<script>
export default {
data () {},
methods: {},
route: {
activate() {},
浏览 3提问于2016-07-14得票数 3
14回答
我可以像这样将滚动行为设置为Vue.js路由器：
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'index',
component: Main
},
{
path: '/some-path',
name: 'some-path',
浏览 0提问于2018-05-21得票数 67
回答已采纳
我需要在Vue.js组件中包含一个来自外部JS文件的函数。我引用了来了解如何在webpack配置中加载外部文件。我目前的设置如下：
webpack.dev.conf.js
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')
[...]
new HtmlWebpackExternalsPlugin({
externals: [{
module: 'iframeresize',
entry: 'https://[...]/iframeR
浏览 0提问于2018-02-22得票数 1
回答已采纳
我目前正在做一个学校项目，任务是为我们的大学创建一个功能正常的web应用程序(带有数据库)。我们的应用程序是一个基于intranet的活动日志记录系统。 在我们的第一个学期，我们通过Vue.js / Vuetify完成了我们的前端。它有完整的路由器(和多个页面)、功能正常的按钮和数据表(以及假身份验证)。 现在，我们需要将它连接到后端。我们选择了python django REST API，因为我们的研究发现它的实现速度会更快(我们的截止日期最多在2周内)。我的问题是如何(或者是否可能)将我们的vue.js应用程序连接到django，以便它可以将登录身份验证和数据库查询提取到我们的SQL (
浏览 17提问于2019-09-04得票数 0
在Nuxt.js中，我有一个导出的助手函数，它还应该以编程方式导航路由器。
在Vue.js中，我通常会从“@/路由器”导入路由器。
我怎么把这个迁移到Nuxt呢？
doSomething.ts
export default function doSomething(name: string){
console.log(`hello ${name}`);
this.$router.push({ path: "/" }); // this.$router not defined!
}
Component.vue
import doSomething from "
浏览 12提问于2022-07-22得票数 0
我不明白如何将“路由组件”加载的数据传递给“subRoute组件”。(我正在使用Vue.js和Vue-路由器)
我的路由器看起来是这样的：
router.map({
'/a': {
component: A,
subRoutes: {
'/b': {
component: B
},
'/c': {
component: C
}
}
}
});
我只想与组件B和组件C共享由组件A加载的数据。
提前谢谢！
浏览 5提问于2016-06-17得票数 4
回答已采纳
在客户提交一个包含授权码的标准帐户表单后，我收到了来自Stripe的回复： http://localhost:8080/authorize?state=s_987654321&code=ac_123456789. 但之后。它向我发送了一个404错误，我在控制台中得到了这个错误： vue-router.esm.js?8c4f:2051 Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", messag
浏览 29提问于2020-07-17得票数 0
8回答
有没有人想出了如何让Vue.js与带有GitHub或GitLab页面的history mode协同工作？
它适用于hash mode，但我不想因为搜索引擎优化相关的原因而使用hash mode。
路由器模式参考：
浏览 0提问于2017-12-06得票数 13
//编辑:我想我已经解决了这个问题。我需要从vue独立建造..。
我已经将我的vue.js 1.0应用程序迁移到vue.js 2.0 (使用迁移助手)。但是这个错误显示在控制台Failed to mount component: template or render function not defined. (found in root instance)中。
以下是我的简化main.js：
import Vue from 'vue';
import Router from 'vue-router';
import SiteHeader from '
浏览 3提问于2016-10-06得票数 3
回答已采纳
2回答
我在vue-路由器上使用Vue.js 1.0。
我有一个组件UserList.vue
<template>
<a v-link="{name: "user_list", params: {cat: 'admin'}}">admin</a>
<a v-link="{name: "user_list", params: {cat: 'normal'}}">normal</a>
</template>
<script&
浏览 5提问于2016-10-24得票数 0
回答已采纳
在我的vue.js中，我使用navigation.vue中的params将其传递到下一页，以便将其用于动态路由，如下所示：
<router-link tag="p"
:to="{name: 'Main', params: {category: link.linkCategory}}"
:key="link.linkCategory">
以下是路由器index.js的一部分：
export default [
{
path: '/origin/:category',
name
浏览 1提问于2020-07-14得票数 2
回答已采纳
假设我只在脚本标记中导入这个文件。
Vue.js作为一种我不能仅引用以下内容就无法访问的技术提供了什么？
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
经过进一步的研究，我发现Vue.js有一个用于vue路由器的CDN。
<!-- vue-router -->
<script src="https:/
浏览 1提问于2019-08-27得票数 0
回答已采纳
我刚接触vue.js和I#m，现在正在练习路由。我的router.js看起来像这样：
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/'
浏览 0提问于2019-10-16得票数 1
1回答
我想在里面开发一个带有vue.js组件的库。该组件的内部将包含导航元素。我希望它能与vue路由器一起工作，而不使用vue路由器。在路由器模式下，它应该使用<router-link>，如果没有使用路由器，它应该返回标准的<a>标记。
<template>
<div>
<div v-if="vueRouterIsUsed">
<router-link v-bind:to="url">Router link</router
浏览 2提问于2019-10-17得票数 1
回答已采纳
我非常喜欢Vue.js的默认路由库。但到了反应，我觉得官方的支持是缺乏路由器库。我使用了第三方反应路由器库，但我不知道在第三方库中我们能有多可靠。我在谷歌上搜索过，但每个人都很乐意谈论如何使用react路由器，而且似乎没有人为没有官方路由器库而烦恼。所以我想知道为什么没有人关心这件事。
所以，我的问题是，是否有计划发布带有React版本的官方路由器库，还是应该依赖第三方库？
谢谢你接电话。
浏览 3提问于2018-01-10得票数 1
2回答
我正在使用Vue.js为火狐创建一个插件。我希望它有多个组件的路由。但是，每次我点击来自路由器链接 <router-link to="/about">About</router-link> 我正在浏览器中更改url (所以它看起来像这个丑陋的moz-extension://a86771fb-409f-4096-8a07-b000de29d6bf/dist/index.html#/about)。 有没有办法避免这种情况，让搜索/网址栏为空？我已经可以说，如果需要的话，我可以使用不同于vue-router的解决方案。
浏览 21提问于2019-12-10得票数 0
回答已采纳
我需要建立一个使用Node.js快捷框架和Vue.js的身份验证系统。到目前为止，我只在JWT中看到了解决方案。如果我能在AngularJS中找到这样的解决方案，并承诺：，那就太好了。是否可以使用Vue.js路由器或以其他方式设置一个具有承诺函数的解析参数，如本指南中关于AngularJS的内容？谢谢!
浏览 3提问于2017-03-08得票数 1
回答已采纳
3回答
我正在使用Vue.js和vue-router，我试图在单击事件上导航。
根据vue-router API，我应该使用router.push(name) 函数。
问题是路由器是在App根组件中初始化的，我希望从其中一个App组件子组件进行导航。
有没有办法从this.$root或类似的地方获取路由器的漏洞？
浏览 12提问于2017-01-14得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
