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跳轉