vue-router使用，router-link传参

vue项目中的路由：

router.js

// 引入vue和vue-router

import vue from 'vue'

import vueRouter from 'vue-router'

// 自定义一个页面组件

import home = (resolve) => { require(['./hone.vue'], resolve) }

// 定义路由的每一个组件映射关系

const routers = [

   {

       path: '/',

       name: 'home',  //自定义

       component: home // 上面自定义的home

  }

]

//  创建一个路由对象，并且配置基本信息

const router = new VueRouter({

      mode: 'history', // 去掉地址栏中的#

      base: __dirname, // 一般为我们自己的域名地址

      routers: routers // 映射

})

export default router  // 将router对象暴露出去

 

2.router-link传参：

1)  <router-link   :to="{name: 'aboutUs', query:{ id: 1} }">about us</router-link>

解析后的格式为 例如： xxx.cn/aboutUs?id = 1

2)  <router-link   :to="{name: 'aboutUs', params:{ id: 1} }">about us</router-link>

解析后的格式为 例如： xxx.cn/aboutUs，页面接收参数需要像这样

let id = this.$route.params.id;

3) 如果没有参数则不需要传参数：

<router-link   to="aboutUs">about us</router-link> // name跳转

<router-link   to="/aboutUs">about us</router-link> // path跳转