序言

别因今天的懒惰，让明天的您后悔。输出文章的本意并不是为了得到赞美，而是为了让自己能够学会总结思考；当然，如果有幸能够给到你一点点灵感或者思考，那么我这篇文章的意义将无限放大。

思考

最近我一直在想，很多同学可能跟我一样对于vue或者react相对比较熟悉，那么我们可以用vue所知的知识来学习鸿蒙吗？

我觉得是可以的，我原来只会vue的时候学习reac就是这样做的，比如：在vue中父组件传值给子组件怎么做？在vue中请求是怎么做？在vue中本地储存是怎么做？

我们带着这样的思路去学习鸿蒙可能就轻松多了吧！下面我们就来实践一下。

vue2中路由跳转普通跳转

this.$router.push({ name: '/logon' });

携参跳转

this.$router.push({ name: '/logon', params : {} });

vue3中路由跳转

vue3跟vue2基本一致。

import { useRoute, useRouter } from 'vue-router';
const Route = useRoute();
const Router = useRouter();
Router.push({ name: '/logon' });

鸿蒙中跳转路由引入

路由api引入：有两种方式，第一种是路由api，第二种是ArkUI（之所以ArkUI可以用router是因为官方在封装的时候将router在ArkUI中引入了并且暴露了出来。）；如下：

import router from '@ohos.router';
// or
import { router } from '@kit.ArkUI';

普通跳转

路由跳转方式有三种：第一种是-pushUrl；第二种是-replaceUrl；第三种是-back

对标vue的是push和replace跳转方式

pushUrl跳转会保留上一页的页面栈 （使用场景：列表进入详情功能）replaceUrl跳转会销毁上一页 （使用场景：登录页跳转到首页）back返回上一页 （使用场景：自定义导航栏的详情页返回列表）

代码示例:

import { router } from '@kit.ArkUI';
router.pushUrl({
  url: 'pages/details',
})

跳转路由携带参数

import { router } from '@kit.ArkUI';
router.pushUrl({
  url: 'pages/details',
  params: {
    name: tab.value,
    token: this.token
  }
})

接收路由参数

获取发起跳转的页面往当前页传入的参数。

interface  IParams {
  name: string
  token: string
}
const params = router.getParams() as IParams

结语

我们都在砥砺前行，望诸君不忘初心；回归自己最初的模样。