vue.js 1.0 v-link传参总结

vue.js 1.0

v-link目前主流版本已经很高了，使用a标签v-link这种方法已经不多见了，现在简单总结下。

v-link 是一个用来让用户在 vue-router 应用的不同路径间跳转的指令。该指令接受一个 JavaScript 表达式，并会在用户点击元素时用该表达式的值去调用 router.Go。

1.在Appointment.vue文件中在html加上标签

1	<a class="weui-cell weui-cell_access" v-link="{path:'/Appointment/'+index+'/'+item.appointment_applies_count,params:{index:index,item:item.appointment_applies_count}}">

此处 path中的index必须要和params中的value对应，不是和key对应！！

2.在min.js和route-config.js中也就是路由配置文件中

import VueRouter from 'vue-router'

import {configRouter} from './route-config'

Vue.use(VueRouter)

let router = new VueRouter()
>configRouter(router)

导入路由文件

这里使用调用了一个函数configRouter(在min.js文件中)来具体配置路由

export function configRouter(router) {
const routeMap = {
    '/Appointment/:index/:acount':{
      name:'Appointment',
      component:require('./components/doctor/Appointment.vue'),
    }
  }
  router.map(routeMap)
}

这里参数没有限制，但是url限制在2kb

3.在其他组件中使用参数：

this.$router.params.index

this.$router.params.acount

v-link的其他用法：

<!-- 字面量路径 -->
<a v-link="'home'">Home</a>

<!-- 效果同上 -->
<a v-link="{ path: 'home' }">Home</a>

<!-- 具名路径 -->
<a v-link="{ name: 'detail', params: {id: '01'} }">Home</a>

[https://github.com/vuejs/vue-router]