vue路由传参的三种方式

vue项目中很多情况下需要用到路由传参，想了一下有三种

1，query方式

2，params方式

3，在路由地址后面拼接参数

一，query方式

//第一步先注册路由
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Route1 from '@/components/Route1'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Route1',
      name: 'Route1',
      component: Route1
    }
  ]
})

第二步 添加要跳转的页面和参数，这里使用的是queryBtn,所用的参数在query里面
<template>
  <div id="app">
    <button @click="queryBtn">路由</button>
   <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    queryBtn(){
      this.$router.push({
        path:'/Route1',
        query:{
          name:'白月魁',
          age:100,
          height:172
        }
      })
    }
  }
}
</script>

<style>

</style>

//第三步，页面接收所用$route.query即可
<template>
    <div>
        <h2>{{$route.query.name}}</h2>
        <h2>{{$route.query.age}}</h2>
        <h2>{{$route.query.height}}</h2>
    </div>
</template>
<script>
export default{

}
</script>

<style scoped>

</style>

二，param方式

//第一步先注册路由
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Route1 from '@/components/Route1'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Route1',
      name: 'Route1',
      component: Route1
    }
  ]
})

第二步 添加要跳转的页面和参数，这里使用的是queryBtn,所用的参数在params里面
<template>
  <div id="app">
    <button @click="queryBtn">路由</button>
   <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    queryBtn(){
      this.$router.push({
        name:'Route1',
        params:{
          name:'马克',
          age:27,
          height:185
        }
      })
    }
  }
}
</script>

//第三步，页面接收所用this.$route.params和query有区别
<template>
    <div>
          <h2>{{this.$route.params.name}}</h2>
        <h2>{{this.$route.params.age}}</h2>
        <h2>{{this.$route.params.height}}</h2>
    </div>
</template>
<script>
export default{

}
</script>

<style scoped>

</style>

三，在路由地址后面拼接参数

//第一步，在这里加一个name
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Route1 from '@/components/Route1'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Route1/:name',
      name: 'Route1',
      component: Route1
    }
  ]
})

//第二步,进行传递
<template>
  <div id="app">
    <router-link to="/Route1/冉冰">路由</router-link>
   <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>
//第三步，接受,这里的name要和路由中的对应
<template>
    <div>
        <h2>{{$route.params.name}}</h2>
    </div>
</template>
<script>
export default{
    
}
</script>

<style scoped>

</style>

当然了，写法并不固定啊\(^o^)/