Vue.js专区Vue学习让前端飞

<router-link>组件

2018-04-19  本文已影响34人  椰果粒

<router-link>组件支持路由导航功能。
一:首先看一个栗子:

<router-link :to='/Home' replace tag="li" active-class="active" exact>Home</router-link>
这个栗子表示一个<li>标签,点击时跳转到Home组件中,并且不会留下历史跳转记录,并且开启router-link严格模式

二:详细讲解router-link组件的props:

<router-link :to='/Home'>Home</router-link>
渲染结果:
<a href="Home">Home</a>
<router-link :to="{ path: 'register', query: { name: 'fjw' }}">router</router-link>
渲染结果:
<a href="/register?name=fjw">router</a>
<router-link :to='/Home' tag="li" >Home</router-link>
渲染结果:
<li>Home</li>
此时依旧会监听点击事件,触发导航
上一篇 下一篇

猜你喜欢

热点阅读