代码之家 › 专栏 › 技术社区 › Hammerbot

动态路由器链路

vue-router vue.js

7

Hammerbot · 技术社区 · 8 年前

我用VueJS和VueRouter开发了一些博客。所以我在行政部门有一个降价编辑,用来添加博客帖子。

我的问题是:如何 router-link s使用动态内容?

目前,我只能添加经典 <a href="...">foo</a> 与编辑。当内容呈现时,它是一个经典链接,因此当访问者单击该链接时,整个网站会重新加载以显示目标链接的内容。

我认为我正在寻找的行为是将内部链接转化为 路由器链路 并将外部链接转化为经典链接。

你在项目中实现这一目标的策略是什么?有没有人遇到过这个问题?

谢谢你的建议或想法。

如果您想了解我所说的内容,我会在一个小的JSFiddle中解释我的问题: http://jsfiddle.net/El_Matella/museptre/1/

const Home = { 
  template: '<div>Home <div v-html="dynamicContent"></div></div>',
  data () {
    return {
        dynamicContent: '<router-link to="/foo">This is a dynamic link</router-link> and <a href="https://google.com" target="_blank">and this is a classic link</a>'
    }
  }
}

将仅渲染经典链接

2 回复 | 直到 8 年前

1

9

Hammerbot 8 年前

好的,现在我可以看到你想要实现什么了。

显然,渲染 <router-link></router-link> 静态HTML不起作用。

您需要生成 <rotuer-link> 直接在模板中。您可以使用 render method 要获得更大的灵活性/活力,或者正如Vue docs所说:

充分利用JavaScript的编程能力。

然后你就出发了 to 指向某些动态变量的链接的参数和内容,例如来自 data 道具

示例1。使用“simple Dynamics”字符串模板:

const Home = { 
  template: '<div>Home <router-link :to="dynamicTo">{{dynamicContent}}</router-link></div>',
  data () {
    return {
        dynamicContent: 'This is a dynamic link',
        dynamicTo: '/foo'
    }
  }
}

示例2。使用“更复杂的动态”和渲染方法:

 render: function(createElement) {
    createElement(
      'router-link', {
        props: {
          to: this.dynamicTo
        }
      }, this.dynamicContent)
}

我没有检查第二个示例是否具有有效语法,但您已经知道如何使用JavaScript生成完全可自定义的模板(可以使用循环、变量等)。

可以创建自定义组件来解决问题,并使用渲染功能:

export default {
    props: {
    content: {
        type: String,
      required: true
    }
  },
  render (h) {
    return h(Vue.compile(this.content))
  }
}

以这种方式使用:

<dynamic-vue-component :content="dynamic"></dynamic-vue-component>

下面是一个JSFIDLE,演示了已解决的问题: JSFiddle

2

8

salazarpardo 8 年前

可能是一种黑客行为,但我通过添加onclick属性来解决这个问题,强制路由器选择链接并防止页面重新加载:

 <a href="/the-link/" target="_self" onclick="event.preventDefault(); 
 app._router.push('/the-link/');">Some text.</a>