vue-router 相关问题

如何在特定页面禁用中间件，nuxt中间件

我声明了一个中间件来检查 nuxt.config.js 中每个路由的角色。但想在某些页面禁用。 // 在 nuxt.config.js => 路由器：{ 中间件：['角色...

如何在 Vuetify 3 应用程序中利用多种布局

当我使用 npm 创建基本的 vuetify 应用程序时，我会加载包含 default.vue 及其组件的布局文件夹。 然后在路由器中我有以下内容： /** * 路由器/index.ts...

Nuxt 3 中每个用户的自定义路由

比方说，我有 2 种用户类型：管理员和客户端以及以下目录结构： 页面/admin/products.vue 页面/admin/settings.vue 页面/客户端/products.vue 当管理员类型的用户负责时...

从路线导航回来时，如何使用偏移量正确滚动到 VueJS 中的元素？

我正在与 Vue Router 进行斗争（在我的例子中是 4.2 版本）。我想实现当用户从导航返回到另一条路线时，恢复原始垂直位置。 常量路由器 =

无效的组件名称：“pages/product/_slug.vue”。组件名称应符合 html5 规范中有效的自定义元素名称

我正在使用 Nuxt.js 并有一些动态路由。我的文件夹结构是这样的： - 页面 - 产品 - _slug.vue 我链接到这样的路线： 我正在使用 Nuxt.js 并有一些动态路由。我的文件夹结构是这样的： - pages - product - _slug.vue 我链接到这样的路线： <nuxt-link :to="{ name: 'product-slug', params: { slug: product.slug } }"> 它工作正常，它显示了正确的 URL，并且也可以很好地引导页面，但是，我在控制台中收到恼人的红色错误： [Vue warn]: Invalid component name: "pages/product/_slug.vue". Component names should conform to valid custom element name in html5 specification. 我发现了这个问题，但收效甚微：https://github.com/nuxt/nuxt.js/issues/165 如果组件中有名称，请删除名称之间的空格。例如 export default { name: 'Assign Role' } 更改为： export default { name: 'AssignRole', } 此错误信息的原因是_slug.vue组件的名称与文件名相同。 我期待它name='_slug.vue'你需要将其更改为这样的name='ProductItem' 我不确定这是一个错误还是什么。 但是在为我的组件命名后，按如下方式修复了此问题。 export default { name: 'NameOfTheCompnent', ... } 如果您使用带有 vue-property-decorator 的 vue 2.x，当 vue 组件的类如下所示时，可能会出现此问题： @Component({}) export default class MyComponent extends Vue { ... } 您应该删除 ({}) 或为 name 字段设置特定值 - @Component 或 @Component({ name: 'MyComponent' })。 当我在组件列表中使用方括号时，我得到了这个错误，我花了很长时间才发现它，因为所有错误都会导致其他地方。 错了！ export default { name: "WelcomeScreen", components: [ Welcome_Ready, ], } 右 export default { name: "WelcomeScreen", components: { Welcome_Ready, }, }

在 RouterLink 中扩展父视图插槽 vỉew

我有一个定义的Vue路由，父视图和两个子视图 ./route/index.ts 常量路由器 = createRouter({ 路线：[ { 路径: '/dataset/:dataset_name', 成分：

使用 :key 保留路由器转换，同时确保子基础视图不刷新

我有一个应用程序，我在路由器视图上使用 :key="$route.path" 进行转换。但问题是，使用 :key 最终会刷新子路由基本视图，最终调用

Vue.js router.push 更改 URL，但 RankerDetail 组件不会在按钮导航上更新

我正在使用 vue-router 开发 Vue.js 应用程序，但我的 RankerDetail 组件遇到了问题。该组件的目的是根据路由参数id显示不同的数据。当我男人...

vue 路由器 - 身份验证成功后重定向

我有一个使用 vue 路由器的 vue 应用程序。我为登录路由实现了一个身份验证系统。我如何让它自动重定向到用户最初想要访问的路线...

Vue3 Composition API：错误：element/if/for 节点缺少 Codegen 节点。在路由器视图中使用命名槽时，首先应用适当的转换

我目前正在所有应用程序中重写我的 Vue 代码，但遇到了一个相当烦人的错误，我似乎无法破译。让我先向你解释一下我想做什么......

如何在延迟加载的路由组件加载时显示“正在加载”动画？

我使用 webpack 的代码分割功能将我的应用程序分割成多个块，这样当用户访问我的网页时就不会下载整个应用程序包。 某些路线所涉及的块...

通过延迟转换防止浏览器导航上的滚动重置

我在路由器配置中设置了延迟。我希望能够单击浏览器导航按钮（后退和前进）返回到保存的位置，但由于我有延迟并且 { left:0, top:0 }，所以

vue中路由改变后如何重新渲染已经挂载的组件？

保存 q-btn-dropdown 的组件在路由更改之前就已渲染。路由更改发生在用户登录时，因此 helloGuest() 仅在组件执行以下操作时调用一次...

导航到同一组件时如何在 vue.js 中添加页面过渡

我想要在vue中导航到不同页面时有这个淡入淡出动画。 当我导航到附加了与之前的路线不同的组件的路线时，这种方法效果很好。 但是当

路由器推送 Vue 正在传递未定义的参数

我期望通过router.push传递一个值，这是我想传递它的组件： //一些html 导出默认值{ 数据（）{ //</desc> <question vote="0"> <p>我期望通过 router.push 传递一个值，这是我想要传递它的组件：</p> <pre><code>&lt;template&gt; //some html &lt;/template&gt; &lt;script&gt; export default { data(){ //some data }, methods: { uploadTemplate(event) { if(everythingWell){ this.$router.push({name: &#39;upload-document&#39;, params: {value: &#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="0c69746d617c60694c69616d6560226f6361">[email protected]</a>&#34;}}) } } } } &lt;/script&gt; </code></pre> <p>**我的路由器：**</p> <pre><code>const routes = [ { path: &#39;/upload&#39;, name: &#39;upload-document&#39;, props: { default: true }, component: () =&gt; import(&#39;./../modules/doc_templates/pages/UploadDocPage.vue&#39;) } ] const router = createRouter({ history: createWebHashHistory(), routes, }) export default router; </code></pre> <p><strong>还有上传组件，我应该在其中使用道具：</strong></p> <pre><code>&lt;template&gt; &lt;div&gt; &lt;p&gt;value: {{ this.value }} &lt;/p&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { props: { value: String } } </code></pre> <p>应用程序更改为上传路径，但“value”的值未定义，这是我在浏览器中得到的结果：</p> <p>[Vue Router warn]：导航时丢弃无效的参数“值”。</p> <p>我尝试了使用 props，但还是一样</p> </question> <answer tick="false" vote="0"> <p>您没有在路由中指定预期的参数：</p> <pre><code>const routes = [ { path: &#39;/upload/:value?&#39;, name: &#39;upload-document&#39;, component: () =&gt; import(&#39;./../modules/doc_templates/pages/UploadDocPage.vue&#39;) } ] `` </code></pre> </answer> </body></html>

带有 Vue-Test-Utils 和 Vitest 的 Vue-Router 模拟

我试图理解用 Vitest 模拟 Vue-Router 的逻辑。 为此，我尝试在一个非常简单的项目上设置和模拟我的测试环境。当我尝试按照

如何根据 Vue 路由器参数设置页面标题？

我正在尝试使页面标题（元标记）显示您当前所在的个人资料的用户名。我的代码如下： 导出默认新路由器({ 模式：“历史”， 巴...

通过 nuxt-link 将动态对象数据传递到组件

我有一个在 Nuxt 3 中构建的项目，其主页显示产品。在该主页上，您可以单击产品标题，然后打开产品详细信息页面。我通过...存档此内容

Vue3 Router - createWebHistory v createWebHashHistory 问题与 <router-view>

我试图弄清楚为什么 createWebHistory 无法显示 但 createWebHashHistory 可以。 在本地主机上使用 createWebHistory 可以正常工作，但在服务器上（dreamhost...

如何使用VueJS限制未登录用户的页面访问？

我目前正在练习 VueJs 并制作一些示例应用程序。我正在制作一个非常简单的应用程序，它基本上只是一个登录页面，用户将在其中放置他们的凭据并访问他们的个人资料。然而...