uniapp jump page code

Uniapp is a cross-platform development framework that can develop applications that support different platforms such as WeChat mini programs, H5, and App. In Uniapp, jumping to the page needs to be implemented using the routing mechanism provided by the Vue.js framework. This article will introduce the code implementation of the jump page in Uniapp.

1. Routing mechanism of Vue.js
Vue.js provides a powerful routing mechanism to facilitate developers to control page jumps and data flow. In Vue.js, the core idea of ​​routing is to map different page components to different URL addresses, so that jumps between pages can be achieved by changing the URL address. The routing mechanism consists of two core components: router and router-view.

1. Router
   Router is the core component that implements routing in Vue.js. It is responsible for monitoring changes in URL addresses and rendering different page views based on changes in URL addresses. In Uniapp, we can initialize the router by configuring routing information in the pages.json file. The following is a simple pages.json configuration example:

{
"pages": [

{
  "path": "pages/index/index",
  "name": "index"
},
{
  "path": "pages/detail/detail",
  "name": "detail"
}

]
}

In the above example , we define two pages: index and detail. These two pages correspond to the index folder and detail folder in the pages directory respectively. Among them, the path attribute represents the URL address of the page, and the name attribute represents the name of the page, which can be used to dynamically generate the URL address in the code. In the page, we can use the routing mechanism of Vue.js to jump between pages.

2. Routing view
   Routing view is the core component for rendering page views in Vue.js. It renders different page components to different URL addresses. In Uniapp, we need to use the 99ae171a883fff6fa2f384572360bc0a component in the page to render the view component corresponding to the current page. Here is a simple route view example:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<h1>{{ title }}</h1>
<p>{{ content }}</p>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
data() {

return {
  title: 'Hello World',
  content: 'This is a Uniapp demo'
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

above In the example, we define a simple page component to display a title and a piece of content. The component will be rendered to the corresponding URL address. Uniapp will automatically render the component to the corresponding page based on the router's configuration.

2. Page jump in Uniapp
There are two ways to implement page jump in Uniapp: using the built-in method $router provided by Vue.js and using the API interface uni.navigateTo provided by Uniapp. Below we introduce the implementation methods of these two methods respectively.

1. Use the built-in method $router provided by Vue.js
   $router is a built-in method provided by the Vue.js routing mechanism. It can jump to the page by calling the router.push() method. . Here is an example of a simple $router:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<button @click="goToDetail">去详情页</button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
methods: {

goToDetail() {
  this.$router.push({ name: 'detail' })
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

above In the example, we define a button and bind the goToDetail method to realize the function of jumping to the details page after clicking the button. In the goToDetail method, we call the this.$router.push({ name: 'detail' }) method to implement page jump. The parameter of this method is an object containing the name of the jump target page (defined in pages.json).

2. Use the API interface uni.navigateTo provided by Uniapp
   Uniapp provides a series of API interfaces to implement different functions. Among them, the uni.navigateTo interface can realize the page jump function. Here is an example of a simple uni.navigateTo:

##d477f9ce7bf77f53fbcf36bec1b69b7a

dc6dce4a544fdca2df29d5ac0ea9906b

<button @click="goToDetail">去详情页</button>

16b28748ea4df4d9c2150843fecfba68

3f1c4e4b6b16bbbd69b2ee476dc4f83a

export default {
methods: {

goToDetail() {
  uni.navigateTo({ url: '/pages/detail/detail' })
}

}

}
2cacc6d41bbb37262a98f745aa00fbf0

at In the above example, we also define a button and bind the goToDetail method to realize the function of jumping to the details page after clicking the button. In the goToDetail method, we call the uni.navigateTo({ url: '/pages/detail/detail' }) method to implement page jump. The parameter of this method is an object containing the URL address of the jump target page.

3. Summary

Uniapp is a powerful cross-platform development framework that can help developers quickly build cross-platform applications. In Uniapp, the jump page needs to be implemented using the Vue.js routing mechanism and the API interface provided by Uniapp. Developers can choose different implementation methods to implement page jumps according to their own needs. Using the $router method can realize page jumps more easily and quickly, while using the API interface provided by Uniapp can control page jumps more flexibly.

The above is the detailed content of uniapp jump page code. For more information, please follow other related articles on the PHP Chinese website!