3. How to jump and pass parameters on the Uni-app + vue3 page?

Vue projects often need to use the vue-router plug-in. For students who are just getting started with the Uni-app + Vue3 project, will they think that the vue-router V4 version can be used for routing?

I’m not afraid of everyone laughing, that’s what I think. After all, it’s my first time to use Uni-app. Since my memory is terrible during pregnancy, I decided to write notes to deepen my memory.

uni-app page routing is managed uniformly by the framework. We need to configure each page routing and page style in the page.json file, which is somewhat similar to the app.json file in the mini program, so uni-app The routing usage and writing method are different from vue-router.

The project initialization is completed, and the corresponding page.json file is:

uni-app configures which pages the application has through the pages node, receiving an array, each element is an object , the attributes are:

There are two ways to jump to the uni-app page route: use the navigator component to jump, and call the API to jump.

1. Navigator component jump

Similar to the a tag, but it can only jump to the local page, and the target page must be registered in page.json.

Navigator attributes are:

open-type valid values ??

2. uni-app API jump

Use API page jump The methods are:

The framework manages all current pages in the form of a stack. When a routing switch occurs, the page stack behaves as follows:

Method 1: onLoad reception

< p> Method 2: Setup syntax sugar reception

The onLoad function monitors page loading. The received parameter is the data passed by the page, which is an object type.

After seeing this, I believe you will be able to get started with uni-app + vue3 project routing soon. You can also refer to the official website tutorial: https://uniapp.dcloud.io/tutorial/page.html#%E8 %B7%AF%E7%94%B1