路由传参（2018/11/26）

一、路由传参

    思路：

新建一个vue项目------>cnpm i axios --save  ------->在文件路径下新建一个文件夹 hd------>写一个json文件------>在hd目录下进入CMD     json-server 文件名.json------>进入main.js  import axios from “axios”  vue.prototype.$http=axios------->新建一个all.vue  （用途：获取数据 ）------>router中的index.js 引入组件  设定路由的路径------>App.vue  设置组件跳转的链接

 

        路由的写法  path： "/路径/:参数"

 

        获取参数     this.$route.params.参数   //这里的参数就是data.json中的数组名

 

        

        $router    //是导出的总体对象  所有的路由对象

        $route     //是导出的总体对象中的某一项  某一个路由对象

 

all.vue

 

<template>

   <div>

       <ul>

          <li v-for='item in list'>

              <span  v-for='(value,key,index) in  item'>{{key}}:{{value}}</span> //  4）   方法一  循环遍历对象  

              //<span  v-if="type==='list'">{{item.name}}</span>   // 方法二  如果想单独显示list中的某一项则可以用 v-if v-else的形式来进行判断然后取需要的值

             // <span  v-else>{{item.brand}}</span>

          </li>

       </ul>

   </div>

</template>

<script>

   export default{

       data(){

          return{

              list:[]  // 3）将数据传到list中

             

          }

      },

       watch:{ //  1）监控路径的变化

          $route:{

              handler(n){     // n相当于this.$route

                 this.type=n.params.type;  //①先获取到最新的参数

                 this.getData()   //②然后调用获取数据的方法

              },

              immediate:true //必须是true。否则加载组件之后不会执行getData

          }

       },

       methods:{

          getData(){  //2）根据变化的路径获取数据

             this.$http.get("http://localhost:3000/"+this.type).then((res)=>{

                 this.list=res.data

                 console.log(res)

              })

          }

       }

   }

</script>

 

index.js

 

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from  '@/components/HelloWorld'

import All from '@/components/all'

Vue.use(Router)

export default new Router({      

  routes: [

    {

      path: '/',

      name: 'HelloWorld',

      component: HelloWorld

    },

    {

       path:'/all/:type', /*    ":"后面的是参数，可以自定义    */

       component:All

    }

  ]

})

 

 

App.vue

 

<template>

  <div id="app">

    <router-view/>

    <router-link  to="/all/list">list</router-link>   //这里的/list实际上是在给index.js中的 path：“/all/：type” 中的type赋值

    <router-link  to="/all/computer">computer</router-link>

  </div>

</template>

 

 

二、编程式导航

 

this.$router.push({'name':'all',params:{type:type},query:{a:2,b:3}})  //设置参数

this.$route.query.参数名     //取到query中的参数

APP.vue

 

<template>

  <div id="app">

    <router-view/>

   <button @click="go('list')">用户列表</button>    //利用按钮进行数据切换 

   <button @click="go('computer')">电脑列表</button>

  </div>

</template>

<script>

export default {

  name: 'App',

  methods:{

   go(type){ 

       this.$router.push('/all/'+type);   //push（）用于页面跳转

        // this.$router.push({path:'/all/'+type})

      //  this.$router.push({'name':'all',params:{type:type}})

   }

  }

   

}

</script>

 

三、路由的两种模式

           mode：“hash”  //路径中带#  （默认）

            mode：“history” //路径中不带#

            设置在index.js中