vue-router2.0 router-link怎么与组件结合使用?

新版 vue-router 改用 router-link 代替原来的 v-link, 渲染时会根据需要渲染成 a 标签或其他标签。
那假如有个组件最外层就是 a 标签,
例如组件 App

<!-- App -->
<a>
    ...
    <slot></slot>
</a>

使用 App 组件时, 如何与 router-link 结合,实现点击组件跳转到对应地址?

补充:
例如App组件是写好的,现在使用App作为子组件,来实现组件B

<template>
<div>
    <div>...</div>
    <App>Go to ...</App>
</div>
</template>

如果想要点击组件App,进行跳转,使用vue-router如何实现?

阅读 6.5k
1 个回答

模版中指定路径<router-link to="/foo">Go to Foo</router-link>

定义组件模版const Foo = { template: '<div>foo</div>' }

定义路由,加载模版const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]

挂载路由后就可以了。看 Vue-router2 文档上写的很清晰。

推荐问题
宣传栏