Vue Router是一个用于单页面应用程序的路由库,设计用于Vue.js框架。
如何在 Vue 中根据链接是外部还是内部动态渲染 <router-link> 或 <a>?
<template> <component :is="type === 'internal' ? 'router-link' : 'a'" :to="type === 'internal' ? link : null" :href="type !== 'internal' ? link : null" > <slot /> </component> </template> <script lang="ts"> import { Component, Prop, Vue } from "vue-property-decorator"; @Component export default class SiteLink extends Vue { @Prop({ validator: (value: string) => ["external", "internal"].includes(value) }) private readonly type!: string; @Prop({ type: String }) private readonly link!: string; } </script> 上面是一个 Vue 组件,它将在其中渲染链接。我删除了与问题无关的任何内容(即 rel、target、class 等)。 理解 - 我对 Vue Router 的理解是 <router-link to="/about">About</router-link> 和 <a href="/about">About</a> 都会在 DOM 中呈现为 <a href="/about">About</a> ,不同之处在于 <router-link> 版本将为链接提供 SPA 功能(即不提供 SPA 功能)不加载新页面,它会动态呈现组件)。 预期 - 当type="internal"时,它将渲染<router-link>版本。当 type="external" 时,它将渲染 <a> 版本。 <site-link type="external" link="https://stackoverflow.com">Stack Overflow</site-link> Will render <a href="https://stackoverflow.com">Stack Overflow</a> <site-link type="internal" link="/about">About</site-link> Will render <router-link to="/about">About</router-link> Which is then handle by VueRouter to render <a href="/about">About</a> 实际 - 当 type="internal" 时,在 DOM 中呈现带有 no <a> 的 href。当 type="external" 时,它会按预期呈现。 <site-link type="external" link="https://stackoverflow.com">Stack Overflow</site-link> Will render <a href="https://stackoverflow.com">Stack Overflow</a> <site-link type="internal" link="/about">About</site-link> Will render <router-link to="/about">About</router-link> Which is then handle by VueRouter to render <a>About</a> <!-- Notice there is no href --> 有什么想法可以实现我想要的吗? 更好、更干净的方法: <router-link v-if="type === 'internal' :to="link"> <slot /> </router-link> <a v-else :ref="link"> <slot /> </a> 您可以在根元素中使用v-if,这样它就可以解决您的问题 或者您可能只是错过了路径部分? <component :is="type === 'internal' ? 'router-link' : 'a'" :to="type === 'internal' ? { path: link } : null" :href="type !== 'internal' ? link : null" > <slot /> </component> 官方文档包含现在如何执行此操作的示例。 扩展 RouterLink 他们的方法是创建一个处理外部链接的自定义模板。 ...不同之处在于 <router-link> 版本将为链接提供 SPA 功能(即不加载新页面,而是动态呈现组件)。 不加载新页面,我想您的意思是它不会重新加载页面。是的,事实并非如此,因为 onclick 处理程序实际上被分配给一个函数,该函数 执行 preventDefault(防止页面重定向),同时 将新条目推入历史堆栈。 如果您查看 API 参考,<router-link> 为您所做的最引人注目的事情是它根据活动/当前路线在 active-class 之间切换。 因此,话虽如此,您可以通过 <a> 在默认插槽内进行动态 v-slotnchor 渲染;因为此时, href slot 属性将是一个已解析的 URL,然后您可以安全地将其绑定到 DOM href 属性。 编辑 添加了一个示例(未经测试)。 <router-link :to="link" v-slot="{ href, route, navigate, isActive, isExactActive }"> <a :class="isActive ? 'your-custom-class' : 'anything'" :href="type !== 'internal' ? href : 'javascript:void(0);'" @click="customNavigate(navigate.bind($event))"> <slot></slot> </a> </router-link> 其中 customNavigate 处理程序可能类似于: { methods: { customNavigate(navigate) { if (this.type === 'internal') { navigate(); return false; } } } } 您基本上可以根据插槽属性在组件内锚标记上添加任何属性,例如以某些方式导航,添加特殊类,具体取决于您的用例。 您的代码是正确的,但它包含一个致命的错误: :href="type !== 'internal' ? link : null" 这一行的意思是“如果 type 是内部的,则将 href 属性设置为 null”。 router-link 组件将 to 属性转换为字符串,然后将其绑定为 href 属性,但它无法设置已解析的 href 属性,因为您已经将其设置为 null。 一种解决方案是仅绑定必要的属性: const params = computed(() => { if (type === "internal") { return { to: props.to, }; } return { href: props.href, }; }) <component :is="type === 'internal' ? 'router-link' : 'a'" v-bind="params" > 希望有帮助!
如何使用 vue-router 和 getRoutes 获取延迟加载的组件
我正在使用 vue 3.4.27 和 vue-router 4.3.2,我懒惰地加载一些像这样的路由: { 路径:'/path/to/pageone', 组件:() => import('../components/MyStuff/PageOne.vue') }, { 路径:'/...
如基本选项文档中所述(适用于 v3): 应用程序的基本 URL。例如,如果整个单页应用程序在 /app/ 下提供服务,则 base 应使用值“/...
在 Netlify 上部署 Vue.js 后页面刷新和重定向出现 404 错误问题
在 Netlify 上部署 Vue.js 应用程序后刷新页面或尝试导航时,我遇到了 404 错误的问题。在开发上工作正常下面是我正在使用的路由代码: 重要...
检测内部/部分组件内的路由变化(Nuxt 2.14 中的 VueRoute 3)
环境 有一个遗留的 nuxt (v2.14.6) 项目,其中包含 vue-route (v3.4.3)、模块 nuxt-i18n (v6.15.1) 和 vuetify (v2.7.2)。确实...这里有一些历史! 正在通过 pus 进行页面更改...
vuejs - 如果已经登录,则从登录/注册重定向到主页,如果在 vue-router 中未登录,则从其他页面重定向到登录
如果用户已登录并想要访问登录/注册页面,我想将用户重定向到主页;如果未登录并想要访问其他页面,我想将用户重定向到登录页面。某些页面被排除在外...
从 'vue-router' 导入 { createRouter, createWebHistory }; 常量路由 = [ { 路径: '/', 组件: ()=> import('@/components/Home/Home.vue')}, { 路径: '/:marca/cars', 组件: ()=>
我正在尝试使用 vue js 开发一个简单的网站,到目前为止一切进展顺利,但我面临以下问题: 我正在使用路由器来更改页面,它可以工作,但我需要做的是:更改页面...
(Vue 3) Open graph仅在首页有效,其他路线无效
我有一个部署到 github 页面的 VueJS 网站,在 /index.html 内的 部分中包含以下开放图形设置: 我有一个 VueJS 网站部署到 github 页面,在 <head> 内的 /index.html 部分中包含以下开放图形设置: <head> <meta name="description" content="My description"> <meta property="og:title" content="My Title" /> <meta property="og:description" content="My description" /> <meta property="og:url" content="https://demo.github.io/path/" /> <meta property="og:type" content="website" /> <title>My Title</title> </head> 因此,如果我像通过 Discord 一样分享我的主页 https://demo.github.io/path/,则会显示相关信息。 但是,如果我分享其他页面,例如https://demo.github.io/path/about,则不会显示任何信息。 我错过了什么,还是需要 SSR(即 nuxt)? 我希望当我在https://demo.github.io/path/下共享任何页面时,打开的图表信息应该正确显示。 这种事情确实需要SSR。您的第一个初始页面确实会被查看,因为它包含一些带有 OG 标签的 HTML 头,但页面的其余部分是从 SPA 生成的。这意味着您没有平台机器人抓取的任何内容(它们可以解析 JS,但通常不会)。 您可以通过在浏览器上访问 View Page source 轻松地进行双重检查,或者更好地暂时禁用 JS。如果你看到一个空白页面并且 HTML 中没有内容,那么你需要 SSR(可以是 SSR 或 SSG tbh)。 您可以使用以下方法来解决您的问题: NuxtJS,仍然是今天最好的方式 类星体 prerender.io 任何其他可以在服务器上呈现您的代码的自制中间人
我正在尝试为最近从 Vue 2 转换为 Vue 3 的 Vue 应用程序设置 vitest。我收到以下错误,并且无法成功确定问题所在。 ...
我正在从 Vue router Doc 学习相对重定向。 我正在尝试实现代码的文档示例。 常量路由 = [ { // 始终将 /users/123/posts 重定向到 /users/123/prof...
我正在尝试使用 vue-router 转到我的 vue 应用程序中的 UserDetail 路径。 我的路线是: 常量路由 = [ { 路径: '/users', 组件: UserList }, { 路径:'/users/:user_id',组件:UserDetai...
我目前正在通过 Vue 路由器更改页面标题和(在不久的将来)元数据,如下所示: $路线(往返){ document.title = to.meta.title } 当我检查标题时,这工作正常......
我试图在我的根 App.vue 中添加一些依赖于当前路线的逻辑(应用程序加载后),但我发现 Route.name 未定义,当我尝试记录时原来的路
在我的 Vue2 应用程序中,在每个 .vue 文件的 created() 方法中调用 JavaScript 函数非常容易。不想在每个文件中都执行此操作,我是否可以在创建时调用 JS 函数(或更多...
我声明了一个中间件来检查 nuxt.config.js 中每个路由的角色。但想在某些页面禁用。 // 在 nuxt.config.js => 路由器:{ 中间件:['角色...
当我使用 npm 创建基本的 vuetify 应用程序时,我会加载包含 default.vue 及其组件的布局文件夹。 然后在路由器中我有以下内容: /** * 路由器/index.ts...
比方说,我有 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, }, }