uniapp subcomponent jump page with parameters

As a cross-platform development framework, Uniapp provides a very convenient component-based development method, allowing us to split the page into small and concise sub-components, thus improving the maintainability and scalability of the code. However, in actual development, we will encounter situations where we need to perform page jumps in sub-components and need to pass parameters, which requires us to have a certain understanding of the routing and parameter passing mechanisms in Uniapp.

1. Uniapp routing

The routing mechanism in Uniapp uses vue-router, so it supports the native routing definition and API of Vue.js. We know that routing is responsible for jumping between pages in front-end applications. Uniapp provides two routing modes:

1. H5 mode: routing jumps through URLs, and the bottom layer uses history. API.
2. APP mode: Routing jumps through the native APP framework, and the bottom layer uses Native API.

The way to define routes in Uniapp is the same as Vue.js. We define routes in index.js under the router folder. Let’s illustrate with a simple example:

//router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

The above code defines a routing rule, pointing the root directory to the HelloWorld component. This component will be rendered to the page when we access the root route of the project. In actual development, we need to define routing rules based on specific business needs.

2. Page jump

1. Declarative navigation: Jump to other pages by using the router-link tag in the template.

<template>
  <div>
    <router-link to="/">HelloWorld</router-link>
    <router-link to="/About">About</router-link>
  </div>
</template>

2. Programmatic navigation: Jump to other pages through the $router.push or $router.replace method.

<template>
  <div>
    <button @click="gotoAbout()">去About页面</button>
  </div>
</template>

<script>
export default {
  data(){
    return {}
  },
  methods:{
    gotoAbout(){
      this.$router.push("/About")
    }
  }
}
</script>

3. Page parameter passing

In uniapp, page parameter passing is the same as Vue.js. In fact, it is completed through attributes such as query, params, meta, and props. However, one thing to note is that when routing in uniapp, it is recommended to use params to pass parameters. Because query is generally used to pass parameters in the URL, and the native APP also needs to handle page recovery, it is recommended to use params.

1. Passing parameters through the router-link tag

<template>
  <div>
    <router-link :to="{name: 'About', params: {id: 1, name: '张三'}}">About</router-link>
  </div>
</template>

2. Passing parameters through programmatic navigation

<template>
  <div>
    <button @click="gotoAbout()">去About页面</button>
  </div>
</template>

<script>
export default {
  data(){
    return {}
  },
  methods:{
    gotoAbout(){
      this.$router.push({name: 'About', params: {id: 1, name: '张三'}})
    }
  }
}
</script>

3. In routing Routing parameters defined in the rules

//router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/About/:id/:name',
      name: 'About',
      component: About
    }
  ]
})

Two parameters, id and name, are defined in the routing rules. We can obtain the parameters through this.$route.params in the component.

<template>
  <div>
    <h1 id="这是About页面">这是About页面</h1>
    <h2 id="this-route-params-id">{{this.$route.params.id}}</h2>
    <h2 id="this-route-params-name">{{this.$route.params.name}}</h2>
  </div>
</template>

<script>
export default {
  data(){
    return {}
  }
}
</script>

4. Summary

Through the above content, we have learned how to jump to the page and pass parameters in the sub-component in Uniapp. In actual development, we can choose which method to use for jumping and passing parameters according to specific business needs. Either way, we need to pay attention to maintaining good coding style and specifications to make the code easy to maintain and extend.

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