Navigation and routing (navigateTo, tabBar, etc.)

Basic Methods of Route Navigation

uni-app provides multiple route navigation methods, the most basic of which is the uni.navigateTo method. This method retains the current page and navigates to a specified page within the app. You can return to the original page using uni.navigateBack.

// Navigate to a specified page
uni.navigateTo({
  url: '/pages/detail/detail?id=1'
});

// Receiving parameters on the target page
onLoad(options) {
  console.log(options.id); // Outputs 1
}

Parameters can be passed during route navigation and are automatically appended to the URL. The target page retrieves these values through the options parameter in the onLoad lifecycle.

Special Route Navigation Methods

In addition to regular navigation, uni-app provides several special route methods:

1. uni.redirectTo - Closes the current page and navigates to a specified page within the app.

uni.redirectTo({
  url: '/pages/login/login'
});

2. uni.reLaunch - Closes all pages and opens a specified page within the app.

uni.reLaunch({
  url: '/pages/index/index'
});

3. uni.switchTab - Navigates to a tabBar page and closes all other non-tabBar pages.

uni.switchTab({
  url: '/pages/home/home'
});

tabBar Configuration and Usage

tabBar is a feature in uni-app for implementing a bottom navigation bar. It needs to be configured in pages.json:

{
  "tabBar": {
    "color": "#999",
    "selectedColor": "#007AFF",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "Home",
        "iconPath": "static/tab-home.png",
        "selectedIconPath": "static/tab-home-active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "Profile",
        "iconPath": "static/tab-user.png",
        "selectedIconPath": "static/tab-user-active.png"
      }
    ]
  }
}

tabBar pages have some special restrictions:

• You cannot use navigateTo to navigate to a tabBar page; you must use switchTab.
• tabBar pages do not reload when switched and retain their previous state.

Multiple Ways to Pass Route Parameters

In addition to passing simple parameters via the URL, you can also use the following methods to pass complex data:

1. Global Variable Method

// Sending page
uni.navigateTo({
  url: '/pages/detail/detail',
  success: function(res) {
    res.eventChannel.emit('acceptData', {data: 'Complex data'});
  }
});

// Receiving page
onLoad(options) {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.on('acceptData', function(data) {
    console.log(data); // {data: 'Complex data'}
  });
}

2. Vuex State Management

// store.js
state: {
  routeParams: {}
},
mutations: {
  setRouteParams(state, params) {
    state.routeParams = params;
  }
}

// Sending page
this.$store.commit('setRouteParams', {id: 123});
uni.navigateTo({url: '/pages/detail/detail'});

// Receiving page
computed: {
  params() {
    return this.$store.state.routeParams;
  }
}

Route Interception and Permission Control

In real-world projects, it is often necessary to intercept route navigation to implement permission control features like login verification. This can be achieved by overriding route methods:

// Encapsulate route navigation method
const myNavigateTo = (options) => {
  if (options.url.indexOf('/pages/member/') !== -1) {
    if (!uni.getStorageSync('token')) {
      uni.showToast({title: 'Please log in first', icon: 'none'});
      uni.navigateTo({url: '/pages/login/login'});
      return;
    }
  }
  uni.navigateTo(options);
};

// Use the encapsulated method
myNavigateTo({
  url: '/pages/member/center'
});

Route Animations and Custom Effects

uni-app supports configuring page transition animations:

uni.navigateTo({
  url: '/pages/detail/detail',
  animationType: 'slide-in-right',
  animationDuration: 300
});

Supported animation types include:

• slide-in-right - Slides in from the right horizontally
• slide-in-left - Slides in from the left horizontally
• slide-in-top - Slides in from the top vertically
• slide-in-bottom - Slides in from the bottom vertically
• fade-in - Fades in
• zoom-out - Zooms in
• zoom-fade-out - Zooms and fades in
• pop-in - Translates in from the right

Advanced Usage of Route APIs

1. Get Current Route Stack Information

const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
console.log(currentPage.route); // Current page path

2. Dynamically Modify Page Title

uni.setNavigationBarTitle({
  title: 'New Title'
});

3. Listen for Route Changes

// In App.vue
onShow() {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  this.$bus.$emit('routeChange', currentPage.route);
}

Common Issues and Solutions

1. Page Refresh on Return

// Add listener on the previous page
onShow() {
  if (this.$refs.list) {
    this.$refs.list.refresh();
  }
}

2. Page Stack Exceeds 10-Layer Limit

// Use redirectTo instead of navigateTo
uni.redirectTo({
  url: '/pages/newpage/newpage'
});

3. tabBar Red Dot Notification

uni.showTabBarRedDot({
  index: 1 // tabBar index
});

4. Dynamically Hide tabBar

uni.hideTabBar({
  animation: true
});

Cross-Platform Route Differences

Different platforms may have varying route behaviors, requiring compatibility handling:

// Determine platform
const isH5 = process.env.VUE_APP_PLATFORM === 'h5';

// Platform-specific handling
if (isH5) {
  // H5-specific route logic
  window.addEventListener('popstate', this.handlePopState);
} else {
  // Mini-program/App route logic
  uni.onAppRoute((res) => {
    console.log(res.path);
  });
}

Route Performance Optimization Techniques

1. Preload Pages

uni.preloadPage({
  url: '/pages/detail/detail'
});

2. Subpackage Loading

// pages.json
{
  "subPackages": [
    {
      "root": "pages/sub",
      "pages": [
        {
          "path": "moduleA",
          "style": {}
        }
      ]
    }
  ]
}

3. Route Lazy Loading

// Dynamically import components
components: {
  'lazy-component': () => import('@/components/lazy-component.vue')
}

Relationship Between Routes and Page Lifecycles

Understanding the order of page lifecycle triggers during route navigation is important:

1. Navigating from Page A to Page B:

   • Page A: onHide
   • Page B: onLoad → onShow → onReady

2. Navigating back from Page B to Page A:

   • Page B: onUnload
   • Page A: onShow

3. Using redirectTo:

   • Original page: onUnload
   • New page: onLoad → onShow → onReady

Secure Handling of Route Parameters

Handling route parameters requires attention to security:

1. Parameter Validation

onLoad(options) {
  const id = parseInt(options.id);
  if (isNaN(id) || id <= 0) {
    uni.redirectTo({url: '/pages/error/error'});
    return;
  }
  this.loadData(id);
}

2. Parameter Encoding/Decoding

// Encode when sending
uni.navigateTo({
  url: `/pages/detail/detail?title=${encodeURIComponent('Parameter with special characters &value=1')}`
});

// Decode when receiving
onLoad(options) {
  const title = decodeURIComponent(options.title);
}

Advanced Patterns for Route and Page Communication

1. Using EventBus for Cross-Page Communication

// Sending page
this.$bus.$emit('data-update', {newData: 'value'});

// Receiving page
created() {
  this.$bus.$on('data-update', this.handleDataUpdate);
},
beforeDestroy() {
  this.$bus.$off('data-update', this.handleDataUpdate);
}

2. Using Vuex for State Sharing

// Sending page
this.$store.commit('updateData', payload);

// Receiving page
computed: {
  sharedData() {
    return this.$store.state.sharedData;
  }
}

Implementation of Route Hooks

Although uni-app does not directly provide route hooks, they can be simulated in the following ways:

1. Global Route Hooks

// main.js
const originalNavigateTo = uni.navigateTo;
uni.navigateTo = function(options) {
  console.log('About to navigate to:', options.url);
  originalNavigateTo.call(uni, options);
};

2. Page-Level Route Hooks

// In the page
onShow() {
  if (this.$options.routeHook && this.$options.routeHook.beforeEnter) {
    this.$options.routeHook.beforeEnter.call(this);
  }
}

Routes and Page Scroll Position

Handling page scroll positions is a common requirement:

1. Save Scroll Position

onPageScroll(e) {
  this.scrollTop = e.scrollTop;
},
onHide() {
  uni.setStorageSync('pageScroll_' + this.$route.path, this.scrollTop);
}

2. Restore Scroll Position

onShow() {
  const savedPosition = uni.getStorageSync('pageScroll_' + this.$route.path);
  if (savedPosition) {
    uni.pageScrollTo({
      scrollTop: savedPosition,
      duration: 0
    });
  }
}

Dynamic Routes and Permission Control

Generate route tables dynamically based on user permissions:

// Filter routes based on permissions
function filterRoutes(routes, permissions) {
  return routes.filter(route => {
    if (route.meta && route.meta.permission) {
      return permissions.includes(route.meta.permission);
    }
    return true;
  });
}

// Dynamically modify pages.json
const dynamicRoutes = filterRoutes(allRoutes, userPermissions);
uni.setTabBarItems({
  items: dynamicRoutes.filter(r => r.isTab).map(r => ({
    pagePath: r.path,
    text: r.title,
    iconPath: r.icon,
    selectedIconPath: r.selectedIcon
  }))
});