taro之路由功能

taro 页面路由管理

前端路由库的基本原理是监听 popstate 或 hashchange 事件触发后，读取 location 对象对视图进行操控更新。 Taro 为了支持前端路由库的使用，在运行时中引入了 histroylocation 对象的实现，且尽可能与 Web 端规范对齐，你可以在 window 对象上访问到 history 和 location 对象。

我们将 history 和 location 对象统称为页面路由状态。

小程序天然支持多页面(pages数组)，Taro 并非以整个应用为一个路由系统，而是顺应小程序规范以页面维度进行路由管理。每当切换页面时，会将当前页面的页面路由状态缓存。跳转至新页面后会重新创建页面路由状态，并挂载在 window 对象上。当返回上一级页面时，会重新将当前页面的页面路由状态挂载到 window 对象中。

你可以在 “示例 DEMO” 中观察页面切换过程中，history 与 location 对象的变化.

需要说明的是，location 对象仅描述当前页面的链接状态，页面的跳转仍需要调用 Taro.navigateTo() 方法。

页面跳转

// ❌ 错误window.location.assign('...')window.location.href = '...' // 无法实现页面跳转，但可以重新赋值// ✅ 正确Taro.navigateTo({ url: '...' })

页面路由初始化

当通过指定 url 进行页面跳转，进入新页面后，页面路由状态会初始化，例如：

// 传入参数 id=2&type=test#a=1&b=2Taro.navigateTo({  url: '/pages/page/path/name?id=2&type=test#a=1&b=2',})

此时可以从 location.href 上读取到完整链接信息 https://taro.com/pages/page/path/name?id=2&type=test#a=1&b=2，此时 history.state 为：

{  "state": null,  "title": "",  "url": "https://taro.com/pages/page/path/name?id=2&type=test#a=1&b=2"}

使用路由库

信息

Taro 需要升级至 v3.6

应用配置

在路由库中，诸如<Link> 组件内部会动态生成 <a> 标签，因此需要引入 @tarojs/plugin-html 插件以支持在 Taro 中使用 html 标签开发组件。

config/index.js

{  "plugins": ["@tarojs/plugin-html"]}

当 Taro DOM 序列化数据的 nn 字段为 HTML 标签时，会映射为对应的小程序组件名称。由于无法提前预知动态标签，因此需要应用显式告知可能会使用到的动态标签。例如在应用中塞入一个无样式的标签名即可：

<View>  <a></a></View>

代码示例

• React

• Vue

app.js

import { createApp } from 'vue'import { createWebHistory } from 'vue-router'// 自定义组件import Home from './components/home.vue'import Tab1 from './components/tab-1.vue'import Tab2 from './components/tab-2.vue'import Tab3 from './components/tab-3.vue'const routes = [  { path: '/', component: Home },  { path: '/tab1', component: Tab1 },  { path: '/tab2', component: Tab2 },  { path: '/tab3/:groupId/:id', component: Tab3 },]const router = createRouter({  history: createWebHistory(),  routes,})const App = createApp({  onShow(options) {},})App.use(router)export default App

/pages/index/index.vue

<template>  <view>    <view>      <a></a>      <view>        <view class="tab-box">          <router-link class="tab-item" to="/" replace>Home</router-link>          <router-link class="tab-item" to="/tab1?name=advancedcat&from=china" replace>Tab 1</router-link>          <router-link class="tab-item" to="/tab2">Tab 2</router-link>          <router-link class="tab-item" to="/tab3/1234/8765">Tab 3</router-link>          <router-link class="tab-item" :to="{ name: 'user', params: { id: '9876' }}">User</router-link>        </view>        <router-view></router-view>      </view>    </view>  </view></template><script setup></script>