vue-router 相关问题

Vue Router 如何连续滚动到相同的哈希

我目前正在做一个基于Vue的网站，使用Vue Router进行路由。我处理锚链接的滚动行为的方法如下： const 路由器 = 新 VueRouter({ 路线，

具有动态参数的 Nuxt 3 子路由未获得活动类

我有以下文件夹结构。以下几页很重要 /workshops 和 /workshops/workshop-1。 我现在遇到的问题是我的活动链接适用于 /workshops，但不适用于...

使用 vue router 生成菜单标题的最佳方法是什么？

我在vue路由器中定义了以下路由： 常量路由 = [ { 小路： '/'， 名称：'家'， 参数：{ 标签：'首页' }， 组件：主页 }, { 路径：'/path1'， 名称：'p...

Vue3 应用程序在 Netlify 上部署后无法运行

我一直在研究 Ryan Balieiro 的 Foxy 模板 vue 应用程序并对其进行了一些定制。 在 public/data 文件夹中更改一些内容并添加包含 /* /index 的 _redirects 文件后。

beforeEnter 在同一路线上调用 router.push() 时不会触发导航守卫

我的搜索引擎在搜索某些内容后尝试搜索其他内容时无法正确更新。 当我想搜索一些东西时，搜索组件中的搜索功能...

如何在 Vue.js 3 设置中获取查询参数？

我想制作搜索页面，单击其按钮后将重定向到另一个页面。而这个页面将会是这样的 http://localhost:8080/search?q=foo 我的路由器index.js看起来像...

除非刷新页面，否则我的搜索按钮不会呈现新信息

我正在使用 Vue3 为我在学校的项目创建一个天气网络应用程序。它工作得很好，直到您搜索城市时它仍然为您提供有关最后渲染的城市的信息。比如说，我搜索俄亥俄州并且...

如何创建一个简单的内联组件？

我有一个如下所示的组件： 应用程序.vue 我不想有这样一个简单组件的文件。我将如何去创造...

在vue中实现条件选项卡式路由的最佳方式

我想要实现的是使用选项卡进行路由，其中可用选项卡根据用户类型而变化（经过身份验证后，用户类型将存储在 pinia 存储中）。 这就是我最终的结果

如何在vue js中使用axios挂载对象数据

这是我的菜单页： ... 这是我的菜单页： <div class="col col-md-3" v-for="(product, index) in products" :key="index"> <div class="card"> <div class="bg-image hover-zoom ripple ripple-surface ripple-surface-light" data-mdb-ripple-color="light" > <img src="" class="w-80" /> </div> <div class="card-body"> <!--view product link--> <router-link :to="{name: 'viewitems', params: { id: product.itemID }}"> <h5 class="card-title mb-3">{{ product.itemName }} </h5> </router-link> <h5 style="font-weight: bolder;" class="mb-3">{{ product.price }} $</h5> <p><button>Add to Cart</button></p> </div> </div> </div> 我的router.js //to view menu item :id { path: '/ViewDetails/:id', name: 'viewitems', component: ViewItemDetails }, 虽然我可以转到产品详细信息页面，但我在如何将该产品的数据安装到产品视图页面上遇到了麻烦。 <div class="container" v-if="product"> <div class="card" > <div class="container-fliud"> <div class="wrapper row"> <!--image--> <!--Detail--> <div class="details col-md-6"> <!--item name--> <h2 class="product-title">{{product.itemName }}</h2> <!--item description--> <p class="product-description">{{product.description}}</p> </div> </div> </div> //this is script props:['id'], data() { return{ product:null //product: menuItems.find(product => product.itemID == this.$route.params.itemID ), } }, created(){ this.fetchProductDetail(); }, methods:{ fetchProductDetail(){ axios.get(`https://localhost:44345/api/MenuItemModels/${this.id}`) .then(res =>{ this.product = res.data; }) .catch(error => { console.error("fetch product detail error!", error); }) }, } 我尝试运行该代码，但不断收到此错误：* AxiosError {消息：'请求失败，状态代码 400'，名称：'AxiosError'，代码：'ERR_BAD_REQUEST'，配置：{...}，请求：XMLHttpRequest，...}* export default { name: "viewproduct", components:{ Footer, Navbar }, //props:['itemID'], data() { return{ id: this.$route.params.itemID, product:{} } }, created(){ this.fetchProductDetail() }, methods:{ fetchProductDetail(){ // const id = this.$route.params.ItemID axios.get(`https://localhost:7067/api/MenuItemModels/${this.itemID }`) .then(res =>{ this.product = res.data; console.log(this.product) }) .catch(error => { console.error("fetch product detail error!", error); }) }, }, } 这是我获取产品详细信息的方法。

如何在RouteUpdate钩子之前对vue进行单元测试

我有以下 vue 组件，当路由参数更改（test/a -> test/b）时，它使用 onBeforeRouteUpdate 钩子调用 init() 方法。 以下 stackblitz 实例显示了输出...

如何访问在 beforeEach 函数中传递给 Vue Router 的路由器属性

我有一个 Vue Router 路由设置，如下所示： [ { 路径：'/地区'， 名称：'区域'， 组件： () => import(/* webpackChunkName: "regions" */ '../views/RegionsView.vue'),

在vue3中，为什么router.currentRoute和router.currentRoute.value打印的值不同？

当我使用该地址进入/npc页面或者在/npc页面刷新页面时，遇到以下情况。 代码： router.beforeEach(async () => { console.log(路由器.currentRoute, ...

Vue 路由器未更改或响应 URL

可以从一个页面导航到另一页面，但这一更改不会反映在 URL 路径中。尝试直接从 URL（即 localhost:8080/explore）进入页面也只会加载主页...

带有 Typescript 和 beforeEnter 防护的 Vue-router，如何使用经过验证的数据？

我正在使用 Vue 和 vue-router 与打字稿，我有一个常见的情况是显示照片组件的单个页面，我有一条带有 beforeEnter 守卫的路线，该路线查询我的商店以查看是否

如何使用 Composition API 设置具有 Okta auth 的 Vue 应用程序

我正在使用 Okta 设置一个基本的 Vue 身份验证应用程序，基于以下内容：https://github.com/okta/okta-vue。我正在尝试转换处理路由和登录重定向的逻辑...

如何在公共 javascript 模块 - VueJs 中访问当前路由元字段

我的应用程序中有以下路线： 常量路由器 = 新路由器({ 模式：“历史”， 滚动行为: () => ({ y: 0 }), 路线：[ { 路径：'/'，组件：主页，元：{ pageType：'...

Vue：无法在输入vue-router之前访问Pinia Store

我正在使用 Vue 3，包括 Composition API，另外还使用 Pinia 作为状态管理。 在选项 API 中，有一个方法 beforeRouteEnter，该方法内置于组件本身中。不幸的是...

Vue 路由器维基百科风格的转义冒号

上下文 我一直在尝试复制维基百科对其 URL 所做的事情 它的工作原理类似于 /[命名空间]:[页面名称] /[页面名称] 所以如果我去 /randompage 我会得到参数： 命名空间：'' 第 n 页...

vue-router 的 router-link 有实际刷新吗？

我希望在单击链接时刷新“SPA”，而不是看到最小组件替换的默认行为。 听起来好像我正在扼杀SPA最好的部分，但我觉得......