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
        }
      ]
    }
  ]
})

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

到了这里就算是配置好了，运行看看吧~~~~