How to use Vue Router for routing jump in uniapp

How to use Vue Router for route jump in uniapp

Using Vue Router for route jump in uniapp is a very common operation. This article will give you details Introduces how to use Vue Router in the uniapp project and provides specific code examples.

1. Install Vue Router
Before using Vue Router, we need to install it first. Open the command line, enter the root directory of the uniapp project, and then execute the following command to install Vue Router:

npm install vue-router

2. Create a routing configuration file
In the root of the project Create a file named router.js in the directory to configure routing. The specific code is as follows:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/Home'
import About from '@/pages/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

In the above code, we first imported Vue and Router, and told Vue that we will use Router through the Vue.use() method. Then, we defined a routing object, which contains two routes, corresponding to the homepage and about page. Among them, path represents the routing path, name represents the routing name, and component represents the component corresponding to the routing.

3. Mount routing in App.vue
In the App.vue file, we need to introduce the created routing configuration file and mount it into uniapp. The specific code is as follows:

<template>
  <view class="container">
    <router-view/>
  </view>
</template>

<script>
  import router from '../router'

  export default {
    created() {
      uni.$app.$mount(this.$el) // 挂载路由
    },
    router
  }
</script>

In the above code, we first added a view component <router-view></router-view> in the template tag to display the corresponding information of different routes. components. Then, the previously created routing configuration file is introduced in the script tag and mounted into uniapp through the router attribute.

4. Route jump
Now, we can use the <router-link></router-link> component in the component to achieve page jump. The specific code is as follows:

<template>
  <view>
    <router-link to="/home">跳转到主页</router-link>
    <router-link to="/about">跳转到关于页面</router-link>
  </view>
</template>

<script>
  export default {
    //
  }
</script>

In the above code, we use the <router-link></router-link> component to create two jump links, corresponding to the homepage and about page respectively. The to attribute is used to specify the path to jump to.

Similarly, we can also implement routing jumps by using the this.$router.push() method in the component's methods. The specific code is as follows:

<script>
  export default {
    methods: {
      goHome() {
        this.$router.push('/home')
      },
      goAbout() {
        this.$router.push('/about')
      }
    }
  }
</script>

In the above code, we use this.$router.push() method in the goHome and goAbout methods to jump to the homepage and about page respectively. The parameter is the path to jump to.

Summary
Through the above steps, we can successfully use Vue Router to perform routing jumps in the uniapp project. Through the <router-link></router-link> component or the this.$router.push() method, we can easily jump and navigate between pages. I hope this article can help you understand the use of Vue Router for routing jumps in uniapp.

The above is the detailed content of How to use Vue Router for routing jump in uniapp. For more information, please follow other related articles on the PHP Chinese website!