vue學習記錄④（路由傳參）

通過上篇文章對路由的工作原理有了基本的了解，現在我們一起來學習路由是如何傳遞參數的，也就是帶參數的跳轉。

帶參數的跳轉，一般是兩種方式：

①.a標簽直接跳轉。

②點擊按鈕，觸發函數跳轉。

在上篇文章中我們已經有兩個頁面（Helloworld.vue&Hello.vue),現在我准備往Hello.vue里面添加3個鏈接，分別對應兩種情況的跳轉。

 第一步：在原來的Hello.vue里添加路由鏈接跳轉的代碼（見第38-44行代碼），添加后的Hello.vue代碼如下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a href="https://vuejs.org" target="_blank">Core Docs</a>
      </li>
      <li>
        <a href="https://forum.vuejs.org" target="_blank">Forum</a>
      </li>
      <li>
        <a href="https://chat.vuejs.org" target="_blank">Community Chat</a>
      </li>
      <li>
        <a href="https://twitter.com/vuejs" target="_blank">Twitter</a>
      </li>
      <br>
      <li>
        <a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a href="http://router.vuejs.org/" target="_blank">vue-router</a>
      </li>
      <li>
        <a href="http://vuex.vuejs.org/" target="_blank">vuex</a>
      </li>
      <li>
        <a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a>
      </li>
      <li>
        <a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a>
      </li>
    </ul>
    <div>
      <router-link :to="{path:'/helloworld/123'}">參數傳遞1</router-link>
      <br>
      <router-link :to="{path:'/helloworld/789',query:{userid:9527,name:'Tom_Lo'}}">參數傳遞2</router-link>
      <br>
      <button @click="toNewpage">點擊跳轉</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
   methods: {
    toNewpage: function() {
      
      this.$router.push({ path: '/helloworld/999', query: { userid: 128, name: 'Tom' } });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

第38-44行代碼的路由鏈接跳轉寫法是固定的，記住會用就好了。<router-link>默認會被渲染成一個 `<a>` 標簽 ,to指令跳轉到指定路徑 。

第二步：Hello.vue傳遞了參數，那么我們就用Helloworld.vue接收參數。見更新后的Helloworld.vue代碼：

<!--模板部分-->
<template>
  <div class="container">
    <h1>hello，world！</h1>
    <p>{{test}}</p>
    <p>接收的參數id:
      <span class="hint">{{id}}</span>
    </p>
    <p>接收的參數userid:
      <span class="hint">{{userid}}</span>
    </p>
    <p>接收的參數name:
      <span class="hint">{{username}}</span>
    </p>
  </div>
</template>
<!--js部分-->
<script>
export default {
  name: 'helloworld',
  data() {
    return {
      test: 'this is a test',
      id: this.$route.params.id,//接收參數
      userid: this.$route.query.userid,
      username: this.$route.query.name
    }
  }
}
</script>
<!--樣式部分-->
<style>
.container {
  background: #aaa;
  color: blue;
}
</style>

上面的第6-14行就是接收參數的容器。

注意：Hello.vue中的$router是用來傳遞參數的，而Helloworld.vue中的$route是用來接收參數的。

第三步：路由變化了，當然還得在index.js里面體現（見第16行），見更新后的index.js代碼：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import HelloWorld from '@/components/Helloworld'//我們新定義的組件

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {//新路由
      path: '/helloworld/:id',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

 第四步：入口文件App.vue不用動。路由定義、發送參數、接收參數都具備了，下面咱們就跑一下試試吧~~

運行跳轉成功后如下圖：

 

 

通過圖示我們看到，參數都可以正常拿到了。

同時注意url的變化。首先url是有個#號，這個就代表是單頁面的路由（hash模式）；然后我們的參數實際都是放在url上傳輸的，要注意別超出url的長度范圍。

下面我們再來看下子路由。

子路由也就是在父頁面下，單獨划出一個div容器，里面再塞進一個路由。

我們把Helloworld設定為父路由，再設定兩個兩個子路由。分別是info和content。

 更新后的Helloworld.vue代碼如下：

<!--模板部分-->
<template>
  <div class="container">
    <h1>hello，world！</h1>
    <p>{{test}}</p>
    <p>接收的參數id:
      <span class="hint">{{id}}</span>
    </p>
    <p>接收的參數userid:
      <span class="hint">{{userid}}</span>
    </p>
    <p>接收的參數name:
      <span class="hint">{{username}}</span>
    </p>
    <div class="subrouter">
      <h2 class="hint">子路由：</h2>
      <router-view></router-view>
    </div>
  </div>
</template>
<!--js部分-->
<script>
export default {
  name: 'helloworld',
  data() {
    console.log(this.$route);
    return {
      test: '這是一個測試',
      id: this.$route.params.id,//接收參數
      userid: this.$route.query.userid,
      username: this.$route.query.name
    };
  }
}
</script>
<!--樣式部分-->
<style>
.container {
  background: #ccc;
  color: greenyellow;
  height: 500px;
}

.hint {
  color: darkred;
  font-weight: bold;
}

.subrouter {
  background: #aaa;
  width: 500px;
  height: 100px;
  margin: 0 auto;
}
</style>

第15-18行創建了子路由的容器。然后在components下，創建新目錄subpage，並在subpage下新建兩個子組件info.vue和content.vue。

info.vue代碼如下：

<template>
 <div class="info">info page--id:{{id}}</div>
</template>
<script>
export default {
 name: 'info',
 data () {
  return {
   id: this.$route.params.id
  }
 }
}
</script>
<style>
.info{
color:blue;
}
</style>

content.vue代碼如下：

<template>
 <div class="content">
  content page
  <div>ID:{{id}}</div>
 </div>

</template>
<!--js部分-->
<script>
export default {
 name:'content',
 data() {
  return {
   id:this.$route.params.id
  };
 }
}
</script>
<style>
.content{
color:blueviolet;
}
</style>

子路由建好了，那怎么把他們串起來呢？這里就要更新index.js了。index.js代碼如下：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import HelloWorld from '@/components/Helloworld' //我們新定義的組件
// 引入子頁面
import Info from '@/components/subpage/info.vue'
import Content from '@/components/subpage/content.vue'

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      name: 'Hello',
      component: Hello
    },
    { //新路由
      path: '/helloworld/:id',
      name: 'HelloWorld',
      component: HelloWorld,
      children: [{
          path: 'info/:id',
          component: Info
        },
        {
          path: 'content/:id',
          component: Content
        }
      ]
    }
  ]
})

首先要引入子頁面，然后在父路由下配置一下即可。

到了這里就算是配置好了，運行看看吧~~~~