How to implement jump page in vue file

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

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 <router -link>implementation.

<strong><router-link></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!