Recently with the VUE project, here are two ways that vUE can jump to the next page and carry parameters.

Project address: Click me >>>

Typical application scenario: Switch to the details page

1. Configure routes

File path: SRC /router/config.php

import Vue from 'vue' import Router from 'vue-router' import classify from '.. /./components/classify/classify.vue' import classifyChild from '.. /./components/classify/classifyChild.vue' export default new Router({ mode: 'history', routes: [ { path: '/classify', name: ' classify', component: classify }, { path: '/classify/classifyChild', name: 'classifyChild', component: classifyChild }, ] })Copy the code

2. Page hopping and parameter transfer

<router-link :to="{name:'classifyChild',params:{id:item.id}}"> <button> jump </button> </router-link <router-link :to="{path:'/classify/classifyChild',query:{id:item.id}}"> <button> jump </button> </router-link>Copy the code

Parameter reception

$route. Params. id=this.$route.params.id; $route.query. Id =this.$route.query.Copy the code