The difference between vue and uniapp routing

Vue and Uniapp are two front-end frameworks. Vue is a framework mainly used to build web applications, while Uniapp is a framework that uses Vue to build cross-platform applications. Both Vue and Uniapp have their own routing systems, but they differ in implementation and usage.

Vue Routing

Vue’s routing system is built based on Vue Router, which allows developers to define different routes in Vue applications to render different URLs on different URL paths. components. Vue Router provides the ability to navigate between Vue components, allowing us to quickly and intuitively build single page applications (SPA).

The core concept of Vue Router is routing, which consists of paths, components and parameters. Creating routes in Vue is simple. You only need to define the routing table in the main.js or router.js file:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    //其他路由和组件
  ]
})

In the above code, we created a route named "home", which The path is "/". When the route is matched successfully, the Home component will be activated for rendering.

Uniapp routing

Similar to Vue, Uniapp also has its own routing system that can be used to manage navigation from one page to another. The Uniapp routing system uses the uni.navigate series API to jump and manage pages. There are three main navigation types: navigateTo, redirectTo and reLaunch.

navigateTo: Normal navigation, push the page into the stack, and return to the previous page after displaying it.

redirectTo: Redirect navigation and replace the current page with a new page.

reLaunch: Restart navigation, first close all pages, and then open new pages.

Different from Vue Router, Uniapp's routing configuration is defined in pages.json, not in the main code file. Pages.json is a global configuration file for an application. It is used to configure some global properties of the application. Each page of the Uniapp application will correspond to a configuration item in pages.json, including the path, name, and navigation bar style of the page. wait.

The sample code is as follows:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    //其他页面
  ]
}

In the above code, we define a page named "index", its path is "pages/index/index", and specify Its navigation bar is titled "Home".

Summary

Vue and Uniapp both have their own routing systems, but their implementation and usage are different. Vue's routing system is built based on Vue Router and is mainly used to build web applications, while Uniapp's routing system is built using the uni.navigate series API and is mainly used to build cross-platform applications. No matter which framework is used, understanding the implementation and usage of its routing system will provide important help to developers.

The above is the detailed content of The difference between vue and uniapp routing. For more information, please follow other related articles on the PHP Chinese website!