vue router-link

 

router-link两种方式传递参数（params,query）

<template>
    <div>
        <!-- 路由 -->
        <div>
          <!-- query方式 -->
          <router-link :to="{path:'/page1',query:{username}}">page1</router-link>
          <!-- params方式 -->
          <router-link :to="{name:'page2',params:{username1}}">page2</router-link>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
  data() {
    return {
      username:'张三',
      username1:'李四',
    };
  },
};
</script>

 

 

router-link 上添加点击事件

根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。

所以如果在想要在router-link上添加事件的话需要@click.native这样写

<router-link  :to="/user/age/10" @click.native="overTag(index)" @mouseover.native="overTag(index)" @mouseout.native="outTag(index)">
    Alan
</router-link>