vue router 路由传参

第一种 params 

{
      path: '/son1',
      name:"son1",
      component: son1,
}

为路由命名 name:"son1",

在路由跳转时，指定命名路由，传参

1
 <router-link  :to="{name:'son1',params:{id:2,name:'winter',age:18}}" tag="li">首页</router-link>

或2

this.$router.push({
   name:"son1",
    params:{
       id:2,
       name:'winter',
       age:18
      }
});

组件页面 接收展示

<p>{{"我是params传来的id"+" "+$route.params.id}}</p>
<p>{{"我是params传来的name"+" "+$route.params.name}}</p>
<p>{{"我是params传来的age"+" "+$route.params.age}}</p>

query 传参与params 类似，

1 query要用path来引入，params要用name来引入，接收参数类似，分别是this.$route.query.name和this.$route.params.name

2 query在浏览器地址栏中显示参数，params则不显示

3    通过路由params传值，刷新页面数据消失会报错

 

第二种  props

配置路由

props: {
          id: 1234,
          userName: "Winter"
},

页面接收

export default {
        name: "son1",
        props: ['id', 'userName']
    }

页面展示

<h5>{{"我是props传来的id"+" "+id}}</h5>
<h5>{{"我是props传来的userName"+" "+userName}}</h5>

第三种 meta

路由配置

meta: {
         title: "首页",
         show: true
},

页面接收展示

<h3 v-show="this.$route.meta.show">{{this.$route.meta.title}}</h3>

页面效果：

router.js 所有代码

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
import son1 from '@/components/son1'
import son2 from '@/components/son2'

Vue.use(Router)

const router =new Router({
    routes: [
        {
            path: '/',
            component: index,
            redirect:'/son1',
            children:[
                {
                    path: '/son1',
                    name:"son1",
                    component: son1,
                    meta: {
                        title: "首页",
                        show: true
                    },
                    props: {
                        id: 1234,
                        userName: "Winter"
                    },
                    },
                {
                    path: '/son2',
                    name:"son2",
                    component: son2
                },
            ]
        },
    ]
});
export default router;

index.vue 所有代码

<template>
    <div>
        <ul id="nav">
            <router-link  :to="{name:'son1',params:{id:2,name:'winter',age:18}}" tag="li">首页</router-link>
            <router-link to="/son2" tag="li">新闻</router-link>
            <li>娱乐</li>
            <li>军事</li>
            <li>文化</li>
            <li>社会</li>
            <li>历史</li>
        </ul>

        <div id="routerview">
            <router-view></router-view>
        </div>

    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
            return{

            }
        }
    }
</script>

<style scoped>
li{
    list-style: none;
    width: 150px;
    height: 50px;
    text-align: center;
    background: midnightblue;
    color: honeydew;
    line-height: 50px;
    cursor: pointer;
}
#nav{
    float: left;
}
#routerview{
    width:800px;
    height: 400px;
    border: 3px solid #ccc;
    float: left;
    margin-left: 50px;
    padding-top: 200px;
}
</style>

son1.vue 所有代码

<template>
    <div>
        我是子页面  首页
        <p>{{"我是params传来的id"+" "+$route.params.id}}</p>
        <p>{{"我是params传来的name"+" "+$route.params.name}}</p>
        <p>{{"我是params传来的age"+" "+$route.params.age}}</p>
        <h5>{{"我是props传来的id"+" "+id}}</h5>
        <h5>{{"我是props传来的userName"+" "+userName}}</h5>
        <h3 v-show="this.$route.meta.show">{{this.$route.meta.title}}</h3>
    </div>
</template>

<script>
    export default {
        name: "son1",
        props: ['id', 'userName']
    }
</script>

<style scoped>

</style>

son2.vue 所有代码

<template>
    <div>
        我是子页面 新闻
    </div>
</template>

<script>
    export default {
        name: "son2"
    }
</script>

<style scoped>

</style>