我正在使用Vue和Vue路由.对于列表视图中的产品项,我想生成JSON-LN注释,将url属性设置为产品详细信息视图的路径.

我知道我可以通过使用this.$route.path来获得当前路由的路径,但是有没有一种方法可以获得一个不同的路由路径,就像它被渲染时那样

<router-link :to={name: 'ProductDetail', params: {id: some_id, slug: some_slug}}></router-link>

将路由的路径注入其他地方?

推荐答案

您正在寻找Router instance's resolve method:

给定与<router-link/>中使用的形式相同的位置,返回具有以下已解析属性的对象:

{
  location: Location;
  route: Route;
  href: string;
}

在您的情况下,您可以执行以下操作来获取url:

let props = this.$router.resolve({ 
  name: 'ProductDetail',
  params: { id: some_id, slug: some_slug },
});

return props.href;

Vue.js相关问答推荐

Vue Datepicker 不会在渲染时显示默认日期

在 Vue 中删除自定义组件代码重复的方法?

vue 模板中无法识别 pug 语言

Vuejs 和 Laravel 发布请求 CORS

Vuetify 置顶工具栏

使用 vuex 更新数据

Vue 两种方式的 prop 绑定

如何从 .vue 文件中导出多个对象

SVG 加载 vue-svg-loader; [Vue 警告]:无效的组件定义

为 Vue 组件动态添加属性

如何异步验证 Vuetify 文本字段?

异步方法不等待函数

从 vue.js 中的 store 获得的计算(computed)属性的设置器

即使在生产模式下构建,VueJS 也会显示开发模式开发模式消息

按键删除对象不会更新vue组件

emit更新数组不起作用

Vue.js 3 - 替换/更新react性对象而不会失go react性

Vue过滤器应该如何使用typescript绑定?

在鼠标悬停时动态添加和删除类

居中 v-toolbar-title