동적 라우터 링크

Question

VueJS 및 VueRouter를 사용하여 일종의 블로그를 만들었습니다. 그래서 저는 블로그 포스트를 추가하기 위해 행정부에서 마크 다운 편집기를 가지고 있습니다.

내 문제는 : 동적 콘텐츠로 router-link 작업하는 방법?

당분간은 클래식 <a href="...">foo</a> 만 편집기에 추가 할 수 있습니다. 또한 콘텐츠가 렌더링되면 고전적인 링크이므로 방문자가 링크를 클릭하면 전체 웹 사이트가 다시로드되어 대상 링크의 콘텐츠가 표시됩니다.

제가 생각하는 행동은 내부 링크를 router-link으로 변환하고 고전적인 링크로 변환하는 것입니다.

프로젝트에서 달성하려는 전략은 무엇입니까? 누군가 그 문제에 직면 해왔습니까?

조언이나 아이디어에 감사드립니다. 당신은 내가 이야기 무엇을보고 싶다면

나는 작은 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>' 
    } 
    } 
} 

만

Answer 1

확인 고전 링크를 렌더링, 지금은 당신이 원하는 것을 볼 수 있습니다 이루다.

분명히 <router-link></router-link>을 정적 HTML로 렌더링하면 작동하지 않습니다.

<rotuer-link>을 템플릿에 직접 생성해야합니다. 유연성/역 동성을 얻으려면 render method을 사용하거나 Vue docs는 다음과 같이 말합니다.

은 JavaScript의 모든 강력한 기능을 활용합니다.

그런 다음 to 매개 변수와 일부 동적 변수에 대한 링크 내용을 바인딩했습니다. data 소품

"간단한 동성"문자열 템플릿 예 1 :

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> 

가 JSFiddle 해결할 문제 시연을

는 사용자 지정 구성 요소 문제를 해결하고, 렌더링 함수를 사용하여 생성 할 수있다 : JSFiddle