The first params

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

Name the route name:"son1"

When routing jumps, specify named routes and pass parameters

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

//Or 2

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

Component Page Receiving Display

<p>{{"I am params From here on id"+" "+$route.params.id}}</p>
<p>{{"I am params From here on name"+" "+$route.params.name}}</p>
<p>{{"I am params From here on age"+" "+$route.params.age}}</p>

query is similar to params.

1 query is introduced with path and params is introduced with name. Receiving parameters are similar: this.$route.query.name and this.$route.params.name.

2. query displays parameters in the browser address bar, but params does not.

3. By routing params to transmit values, the disappearance of refresh page data will cause errors.

 

The second is props

Configuration routing

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

Page reception

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

Page presentation

<h5>{{"I am props From here on id"+" "+id}}</h5>
<h5>{{"I am props From here on userName"+" "+userName}}</h5>

The third meta

Routing configuration

meta: {
         title: "home page",
         show: true
},

Page Receiving Display

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

Page effect:

router.js All Codes

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: "home page",
                        show: true
                    },
                    props: {
                        id: 1234,
                        userName: "Winter"
                    },
                    },
                {
                    path: '/son2',
                    name:"son2",
                    component: son2
                },
            ]
        },
    ]
});
export default router;

index.vue All Codes

<template>
    <div>
        <ul id="nav">
            <router-link  :to="{name:'son1',params:{id:2,name:'winter',age:18}}" tag="li">home page</router-link>
            <router-link to="/son2" tag="li">Journalism</router-link>
            <li>entertainment</li>
            <li>Military</li>
            <li>Culture</li>
            <li>Sociology</li>
            <li>History</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 all code

<template>
    <div>
        I am the home page of the sub-page.
        <p>{{"I am params From here on id"+" "+$route.params.id}}</p>
        <p>{{"I am params From here on name"+" "+$route.params.name}}</p>
        <p>{{"I am params From here on age"+" "+$route.params.age}}</p>
        <h5>{{"I am props From here on id"+" "+id}}</h5>
        <h5>{{"I am props From here on 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 all code

<template>
    <div>
        //I am a sub-page news
    </div>
</template>

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

<style scoped>

</style>