1. Suppose there are two Vue components, index.js in the src/router folder

import Vue from 'vue';
import Router from 'vue-router';
import officeHome from '@/view/officeHome';
import home from '@/view/home';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/officeHome',
      name: 'officeHome',
      component: officeHome
    },
    {
      path: '/view/home',
      name: 'home',
      component: home
    }
  ]
});

2. Implement simple route jump ------ program (router.push(...))

Use router.push to navigate to different URLs. Router.push will add a new record to the history stack, so when the user clicks the browser Back button, he will return to the previous URL.

<template>
  <div>
    <el-button type="primary" @click="pushTo1">Button 1</el-button>
    <el-button type="primary" @click="pushTo2">Button 2</el-button>
    <el-button type="primary" @click="pushTo3">Button 3</el-button>
    <el-button type="primary" @click="pushTo4">Button 4</el-button>
  </div>
</template>

<script>
export default {
  name: 'officeHome',
  data () {
    return {};
  },
  methods: {
    pushTo1 () {
      // path by default
      this.$router.push('/view/home');
    },
    pushTo2 () {
      this.$router.push({path: '/view/home'});
    },
    pushTo3 () {
      this.$router.push({name: 'home'});
    },
    pushTo4 () {
      // In case of both name and path, name shall prevail
      this.$router.push({name: 'home', path: '/view/home'});
    }
  }
};
</script>

In the above four ways, click to realize route jump. After jump, route address:

3. Program (router.push(...) ------ query parameters

Vue component: officeHome

<template>
  <div>
    <el-button type="primary" @click="pushTo1">Button 1</el-button>
    <el-button type="primary" @click="pushTo2">Button 2</el-button>
    <el-button type="primary" @click="pushTo3">Button 3</el-button>
  </div>
</template>

<script>
export default {
  name: 'officeHome',
  data () {
    return {};
  },
  methods: {
    pushTo1 () {
      this.$router.push({path: '/view/home', query: { username: 'liu', userId: 12 }});
    },
    pushTo2 () {
      this.$router.push({name: 'home', query: { username: 'liu', userId: 12 }});
    },
    pushTo3 () {
      // In case of both name and path, name shall prevail
      this.$router.push({name: 'home', path: '/view/home', query: { username: 'liu', userId: 12 }});
    }
  }
};
</script>

Vue component: home

<template>
  <div>
    <p>user name:{{user.username}}</p>
    <p>ID: {{user.userId}}</p>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      user: {
        username: '',
        userId: ''
      }
    };
  },
  mounted () {
    // $router is a VueRouter instance. Navigate to different URL s and use $router.push
    console.log(this.$router);
    // $route is the current router jump object. You can get name, path, query, params, etc. through $route. Attribute name
    console.log(this.$route);
    console.log(this.$route.query);
    this.user = this.$route.query;
  }
};
</script>

Note: using query to pass parameters, the parameters will be displayed in the route (/ view / home? Username = Liu & userid = 12)

4. Program (router.push(...) ------ params parameter, specify route name

Vue component: officeHome

<template>
  <div>
    <el-button type="primary" @click="pushTo1">Button 1</el-button>
    <el-button type="primary" @click="pushTo2">Button 2</el-button>
    <el-button type="primary" @click="pushTo3">Button 3</el-button>
  </div>
</template>

<script>
export default {
  name: 'officeHome',
  data () {
    return {};
  },
  methods: {
    pushTo1 () {
      // This kind of path that specifies the route and does not specify the name of the route will cause params to fail
      this.$router.push({path: '/view/home', params: { username: 'liu', userId: 12 }});
    },
    // Using params to pass parameters, you must specify the name property of the Vue component route
    pushTo2 () {
      this.$router.push({name: 'home', params: { username: 'liu', userId: 12 }});
    },
    pushTo3 () {
      // In case of both name and path, name shall prevail
      this.$router.push({name: 'home', path: '/view/home', params: { username: 'liu', userId: 12 }});
    }
  }
};
</script>

Vue component: home

<template>
  <div>
    <p>user name:{{user.username}}</p>
    <p>ID: {{user.userId}}</p>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      user: {
        username: '',
        userId: ''
      }
    };
  },
  mounted () {
    // $router is a VueRouter instance. Navigate to different URL s and use $router.push
    console.log(this.$router);
    // $route is the current router jump object. You can get name, path, query, params, etc. through $route. Attribute name
    console.log(this.$route);
    console.log(this.$route.params);
    this.user = this.$route.params;
  }
};
</script>

Click button 1 to jump. The resulting params is an empty object

Click button 2 and button 3 to jump to get the parameters passed through params

By specifying the name of the route and using params to pass parameters, the parameters will also be displayed in the route (/ view/home/liu/12)

5. Program (router.push(...) ----- params parameter, handwritten complete route

In the route configuration file of the project, the route of the configuration component home is changed as follows:

    {
      path: '/view/home/:username/:userId',
      name: 'home',
      component: home
    }

Vue component: officeHome

<template>
  <div>
    <el-button type="primary" @click="pushTo4">Button 4</el-button>
  </div>
</template>

<script>
export default {
  name: 'officeHome',
  data () {
    return {};
  },
  methods: {
    // Use params to pass parameters and write complete path with parameters
    pushTo4 () {
      const username = 'liu';
      const userId = '12';
      this.$router.push({path: `/view/home/${username}/${userId}`});
    }
  }
};
</script>

Vue component: home

<template>
  <div>
    <p>user name:{{user.username}}</p>
    <p>ID: {{user.userId}}</p>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      user: {
        username: '',
        userId: ''
      }
    };
  },
  mounted () {
    // $router is a VueRouter instance. Navigate to different URL s and use $router.push
    console.log(this.$router);
    // $route is the current router jump object. You can get name, path, query, params, etc. through $route. Attribute name
    console.log(this.$route);
    console.log(this.$route.params);
    this.user = this.$route.params;
  }
};
</script>

Click the button to jump to get the parameters passed through params

Through handwritten complete route and params, parameters will also be displayed in route (/ view/home/liu/12)