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

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

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