vue路由跳转传参

路由配置:

import Vue from 'vue'
import Router from 'vue-router'
import container from '@/views/container'
import Home from '@/views/Home'
import About from '@/views/About'

Vue.use(Router)

const routes = [
  {
    path: '/',
    name: 'container',
    component: container,
    children: [{
      path: 'Home',
      component: Home
    },{
      path: 'About',
      component: About,
      name: 'about'
    }]
  }
]

export default new Router({
  mode: 'history',
  routes
})

Home.vue

<template>
  <div class="home">
    <router-link :to="{ path: 'About',params:{name:'Lily'},query:{sex:'女'}}">path跳转传参</router-link><br>
    <router-link :to="{ name: 'about',params:{name:'Lily'},query:{sex:'女'}}">name跳转传参</router-link>
  </div>
</template>

<script>
export default {
  name: 'home',
  data(){
  	return {}
  },
  methods: { }
}
</script>

About.vue

<template>
  <div class="about">
  	<p>名字:{{$route.params.name}}</p>
        <p>性别:{{$route.query.sex}}</p>
  </div>
</template>

<script>
export default {
  name: 'home',
  data(){
  	return {}
  },
  methods: { }
}
</script>

Home页面:

点击home页面中的 path跳转传参 后,About页面:

点击home页面中的 name跳转传参 后,About页面:

总结: 1.使用path跳转时,params参数不生效,query生效(query参数是拼接在url上的) 2.使用name跳转时,params和query都生效,但页面刷新后params参数就消失了