vue路由（带参传值）

首选：创建一个项目（步骤如下）

$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

然后我们就开始搭建路由：
npm安装路由

npm install vue-router

npm安装路由vue-resource网络请求模块（vue2.0版本以后不再更新vue-resource，如果做交互，可以使用axios）

npm install --save vue-resource

1.先建立一个路由器模块，主要负责写路由映射

// 引入路由模块并使用它
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 创建路由实例并配置路由映射
// path:'*',redirect:'/home'  重定向到path是/home的映射
const router = new VueRouter({
  routes:[{
    path: '/home', component: require('../components/Home.vue')
  },{
    path: '/about', component: require('../components/About.vue')
  },{
    path: '/jump', component: require('../components/jump.vue')
  },{
    path:'*',redirect:'/home'
  }]
})

export default router;

2.在main.js入口启动文件中启用该路由器

import Vue from 'vue'
import App from './App'
import router from './router' 

// 引入并使用vue-resource网络请求模块
import VueResource from 'vue-resource'
Vue.use(VueResource)

new Vue({
  el: '#app', 
  router,
  render: h => h(App)
})

3.在你的主页面里面去写路由跳转（通过：router-link）

<ul>
  <li><router-link to="/home">Home</router-link></li>
  <li><router-link to="/about">About</router-link></li>
</ul>
<div>
   <!-- 路由匹配到的组件将渲染在这里 -->
   <router-view></router-view>
 </div>

4.新建你要跳转的页面，此处我建立的是2个页面：

Home.vue
本页面有带参传值

<template>
    <div>
        <div>HOME页面</div>
        <div class="aa"  @click="Jump(123)">
            点我可以带参跳转哦
        </div>
    </div>

</template>

<script type="text/ecmascript-6">
    export default {
        methods: {
            //路由跳轉
            Jump(e) {
                this.$router.push({path:'/jump',query:{id:123}});
            }
        }
    }
</script>

<style>
.aa{
    color:red;
    cursor: pointer;
}
</style>

jump页面
本页面接收路由带过来的参数

<template>
    <div>
        <div @click="param">下面是我带过来的参数哦！</div>
        <p>{{this.$route.query.id}}</p>
    </div>

</template>

<script>
    export default {
        methods: {
            //接收路由带过来的参数
            param() {
                console.log(this.$route.query.id);
            }
        }
    }
</script>

<style>
</style>

About.vue页面

<template>

<div>ABOUT页面</div>
</template>

<script>

</script>

<style>

</style>

Home.vue
About.vue

然后运行就ok了。

可以去我的git下载：https://github.com/liusi888/vue-route
也可以联系QQ：523015682