How to implement jump page in vue file

Vue files implement jump page methods: Jumps between Vue files are often implemented through [b988a8fd72e5e0e42afffd18f951b277], the code is [9c0c376ddbe97047c47dd14d3f3103bf demo2d625018d6d57dc2163f3a71531b24864].

The operating environment of this tutorial: Windows 7 system, Vue version 2.9.6. This method is suitable for all brands of computers.

Vue file implementation method to jump to the page:

During the use of vue, jumps between vue files are often made through d0d6ee6dc6bdae089f3fc5baf31e4206implementation.

<strong>b988a8fd72e5e0e42afffd18f951b277</strong>The component is used to set a navigation link and switch between different HTML contents

Usage:

1. Simple writing method

<router-link to="demo2">demo2</router-link>

2. Writing method using v-bind

<router-link :to="‘demo2‘">demo2</router-link>
<!-- 也可以用{}包裹对应的path或name -->
<router-link :to="{ name: ‘demo2‘ }">demo2</router-link>

3. Writing method of passing parameters

<router-link :to="{ name: ‘demo2‘, params: { userId: 123 }}">demo2</router-link>

The parameters passed here need to be corrected in router.js Configure the path of demo2, add wildcard: and the corresponding userId after demo2 in the path, as follows:

{
  path: ‘/demo2/:userId‘,
  name: ‘demo2‘,
  component: demo2
},

After the configuration is completed, the page jump result will be /demo2/123

here The "123" is the userId above

Related learning recommendations:javascript video tutorial

The above is the detailed content of How to implement jump page in vue file. For more information, please follow other related articles on the PHP Chinese website!