vue-router 相关问题

如何在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最好的部分，但我觉得......

Vuex 和 Vue Router - beforeEnter 上的双重条件不起作用

我在 beforeEnter 中有双重条件，没有人可以进入正确的位置。有条件限制什么的吗？ :( 我在路由器文件中的代码： 常量路由 = { 路径：`${routerConfig.preRoute}/

ncaught TypeError：无法使用“in”运算符在未定义的 vue 路由器中搜索“路径”

当我在任意点上从一个组件随机移动到另一个组件时，vue 会给出此错误，然后我无法移动另一个组件。 此错误不在任何特定组件上，它随时可能发生...

Vue 路由器不反映路由，停留在主页上

我正在开发一个 Vue 3 项目，遇到了 Vue 路由器未反映正确路由的问题。当我导航到任何路线（例如 /cars 或 /admin）时，URL 不会更新...

为什么在vue3中，transition组件会导致router跳转失败？

我的路由器配置： { 路径：'/用户'， 名称：'用户'， 组件：布局， 重定向：'/用户/详细信息'， 元：{ 标题：“111”， }, 孩子们： [ { 路径：'...

Vue.js 路由器过渡淡入淡出间隙

我正在 vue.js 中使用令人惊叹的过渡来滑动路由器页面 我正在 vue.js 中使用令人惊叹的过渡来滑动路由器页面 <template> <div> <header-comp></header-comp> <transition name="custom-classes-transition" mode="out-in" enter-active-class="animated slideInLeft" leave-active-class="animated slideOutRight" > <router-view></router-view> </transition> <footer-comp></footer-comp> </div> </template> <style> @import 'https://cdn.jsdelivr.net/npm/[email protected]'; </style> 它工作得非常好和流畅，但是......当第一个页面完全消失时，就会进入新的页面。这在过渡之间造成了差距。 在 Vue 手册中：Transition-Modes 有一些示例。我需要复制第三个按钮示例，但我缺少必须使用的模式。 有什么建议吗？ 过渡元素的主要问题是你希望它们同时在 DOM 中占据相同的空间（即使从视觉上看，一个进入，一个存在 - 这只能通过 transforms 完成，但是两个元素需要占据DOM 中的相同空间）。 因此，您需要给其中之一 position:absolute 并使用 CSS 正确调整其大小和位置，以匹配没有 position:absolute 时它所具有的确切位置和大小（这是不转换时它将具有的位置和大小）。 这是一个工作示例。请注意，您可能需要将不同的样式应用于不同的元素。 由于您没有使用自己的标记提供最小的、可重现的示例，因此无法知道。 在上面的例子中，我给出了后续的<div>（进入的那个） position: absolute; width: 100%; top: 60px; left: 0; 如果您选择将所有 <router-view> 包装到带有 position:relative 的通用包装元素中，则 top 需要为 0（在示例中，60px 占 <nav> 的高度）。 注意：和是，正如其他人已经指出的那样，您不需要mode="in-out"。但这仍然给你留下了定位问题。 编辑：我又玩了两个例子。 一个使用height:100vh的弹性盒容器，其中顶部和底部元素不会增长，而中间元素会增长。当中间元素太大时，它会变得可滚动。 另一个，我在其中使用了过渡效果和 Bootstrap Vue。 实际上，由于您不需要任何特殊行为并且实际上希望两种转换同时发生，因此您根本不应该使用 mode。只需将其删除，它就应该按照您所描述的那样工作。从您粘贴的文档链接： 同时进入和离开过渡并不总是可取的，因此 Vue 提供了一些替代过渡模式 进出：新元素首先过渡，然后完成后当前元素过渡出去。 out-in：当前元素先转出，完成后新元素转入。 mode="in-out"：新元素首先过渡，然后完成后，当前元素过渡出去。 new Vue({ el: '#app', data: { message: 'Hello Vue!', showOn: true }, methods: { handleClick() { console.log(this.message); } } }) .slide-fade-enter-active { transition: all .3s ease; position: absolute; left: 0; top: 0; } .slide-fade-leave-active { position: absolute; left: 0; top: 0; } .slide-fade-enter, .slide-fade-leave-to { transform: translateX(10px); opacity: 0; } #app { position: relative; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <body> <div id="app"> <transition name="slide-fade" mode="in-out"> <button v-if="showOn" key="on" type="button" @click="showOn=false">On</button> <button v-else type="button" key="off" @click="showOn=true">Off</button> </transition> </div> </body> 我使用 position: absolute 和 transition-delay 来模仿 mode="in-out" 这样进入转换会等待，直到离开转换完成 .slide-fade-enter-active { transition: all 0.3s ease-in-out; transition-delay: 0.3s; } .slide-fade-leave-active { position: absolute; transition: all 0.3s ease-in-out; } .slide-fade-enter-from, .slide-fade-leave-to { transform: translateX(-15px); opacity: 0; }

使用vue router和laravel将数据获取到一个数据时出错

我学习Vue，使用Vue router，制作crud SPA应用 显示所有数据的组件： <... 我在使用Vue router学习Vue，制作crud SPA应用 显示所有数据的组件： <template> <div> <table class="table table-striped"> <thead> <tr> <th scope="col">title</th> <th scope="col">description</th> <th scope="col">author</th> <th scope="col">edit</th> <th scope="col">delete</th> </tr> </thead> <tbody> <tr v-for="post in posts"> <td> <router-link v-if="post && post.id" :to="{ name: 'post.show', params: { id: post.id }}"> {{post.title}} </router-link> </td> <td>{{post.description}}</td> <td>{{post.author}}</td> <td> <router-link class="btn btn-primary" v-if="post && post.id" :to="{ name: 'post.edit', params: { id: post.id }}">Edit</router-link> </td> <td> <a class="btn btn-danger" @click.prevent="deletePost(post.id)" href="#">Delete</a> </td> </tr> </tbody> </table> </div> </template> 我的 vue 路由器链接 const routes = [ { path: "/post", name: "post.index", component: () => import('./components/post/Index.vue'), }, { path: "/post/:id/edit", name: "post.edit", component: () => import('./components/post/Edit.vue'), }, { path: "/post/:id", name: "post.show", component: () => import('./components/post/Show.vue'), }, ];` method to get data about one data: ` getPost() { axios.get(`/api/post/${this.$route.params.id}`) .then(response => { this.post = response.data.data }) .catch(error => { console.log(error.message) }) }, 为了显示数据，我使用 {{this.post.description}} 并在 data() { return { post:null }} 如果我尝试获取有关一项数据的数据，则会收到错误“错误：缺少必需的参数“id””，但是 <router-link v-if="post && post.id" :to="{ name: 'post.show', params: { id: post.id}}"> {{post.title}}</router-link> 我发送有关 id 的数据 我尝试获取有关一个数据的数据 解决这个问题，我使用资源从后端发送到前端数据，并在控制器中使用这个url，返回 ['id' => $id, 'data' => $data] 并工作，当 'id' 进入请求时

找不到注入“符号（路由器）”

我在 vue js 3 中使用这个简单的代码，它通常有效，但是这次我遇到了这个错误 未找到注入“符号（路由器）”。 类型错误：无法读取未定义的属性（读取 'pu...

v-slot 只能用在组件或 <template> 标签上。使用 <router-view> （插件：vite:vue）

<router-view v-slot="{ Component }"> <component :is="Component" class="container" ref="componentRef" /> </router-view> 这是我的代码。它用 vue 编译器编译得很好。 但我们正在迁移到 Vite。在使用 Vite 运行时，我收到以下错误： [plugin:vite:vue] v-slot can only be used on components or <template> tags. 路由器视图代码符合标准：https://router.vuejs.org/guide/advanced/router-view-slot 解决方法是什么。 你尝试过这样的事情吗？ <router-view> <template v-slot="{ Component }"> <component :is="Component" class="container" ref="componentRef" /> </template> </router-view>

检查使用vue-router时是否可以前进

我正在使用Vue2和Vue-router（版本^2.2.0）开发一个应用程序，后退和前进导航按钮必须显示用户是否可以后退/前进。 检查用户是否可以...