：navigator方式：

1. 页面跳转不传参：

要想通过 navigator 实现页面跳转我们要用到url属性。

open-type属性可用值（直接上官网截图）：

注意点：不能带页面后缀文件“.wxml”，带了后不能跳转。

错的方式：

<navigator url="/pages/fgclass/meateclass/meateclass.wxml">热门推荐页面跳到肉类页</navigator>

对的方式：

<navigator url="/pages/fgclass/meateclass/meateclass">热门推荐页面跳转</navigator>

2.页面跳转传参：

<navigator url="/pages/fgclass/meateclass/meateclass?param=longdb">热门推荐页面跳转传参数

</navigator>

被跳到的页面接收参数：

只要我们在url中定义了param参数，在被跳转页面里就能在 onload周期函数的参数options里拿到。

二：API方式（官网：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html）:

Api跳转方法列表：

wx.navigateTo()保留当前⻚⾯，跳转到应⽤内的某个⻚⾯。但是不能跳到 tabbar ⻚⾯

wx.switchTap()跳转到 tabBar ⻚⾯，并关闭其他所有⾮ tabBar ⻚⾯

wx.reLaunch()关闭所有⻚⾯，打开到应⽤内的某个⻚⾯

wx.redirectTo()关闭当前⻚⾯，跳转到应⽤内的某个⻚⾯。但是不允许跳转到 tabbar ⻚⾯

wx.navigateBack()关闭当前⻚⾯，返回上⼀⻚⾯或多级⻚⾯

1.API跳转页面不带参数：

/** api跳转**/

bindNavigateto:function(){

url: '/pages/fgclass/meateclass/meateclass',

})

},

2：API跳转页面带参数：

/** api跳转**/

bindNavigateto:function(){

wx.navigateTo({

//url: '/pages/fgclass/meateclass/meateclass.wxml',

url: '/pages/fgclass/meateclass/meateclass?param=apijump',

})

},

在meateclass.js里这样接收参数：

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

console.log(options);

this.setData({

meateparater:options.param,

})

},

注意点：不能带页面后缀文件“.wxml”，带了后不能跳转。

总结：

以上就是小程序的两种跳转方式，是不是很简单？另外的几个跳转api就不写啦。

谢谢浏览，谢谢点赞和评论，觉得对你有用的就关注下呗，我也会关注你的。

我是只说代码的大饼。

一定离不开 Vue Router 来管理你的应用路由。

而 router-link 组件就是 Vue Router 提供给我们的秘密武器，它可以让你轻松实现页面跳转，并拥有丰富的功能和灵活的配置。

今天，我们就来深入了解一下 router-link 的用法和奥秘！

1. 基础用法：

router-link 组件接受一个 to 属性，用于指定跳转的目标路由路径。简单来说，你只需要将 router-link 组件包裹在需要跳转的链接文本或元素上，就可以实现页面跳转了。

示例代码：

html

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
  </div>
</template>

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

2. 链接文本和元素：

默认情况下，router-link 组件会将 to 属性的值作为链接文本。可以使用 router-link 组件的 tag 属性指定其他元素标签，例如 a、button 等。

示例代码：

html

<template>
  <div>
    <!-- 使用 a 标签 -->
    <router-link to="/" tag="a">首页</router-link>
    <!-- 使用 button 标签 -->
    <router-link to="/about" tag="button">关于我们</router-link>
  </div>
</template>

3. 传递参数：

router-link 组件支持传递参数，可以通过 params 或 query 属性进行传递。

示例代码：

html

<template>
  <div>
    <!-- 使用 params 传递参数 -->
    <router-link :to="{ name: 'user', params: { id: 1 } }">用户详情</router-link>
    <!-- 使用 query 传递参数 -->
    <router-link :to="{ path: '/search', query: { keyword: 'vue' } }">搜索</router-link>
  </div>
</template>

4. 自定义激活样式：

router-link 组件提供了 active-class 属性，用于自定义当前激活路由的样式。

示例代码：

html

<template>
  <div>
    <router-link to="/" active-class="active">首页</router-link>
  </div>
</template>

<style scoped>
.active {
  color: red;
}
</style>

5. router-link 组件的解析：

router-link 组件最终会被渲染成一个 <a> 标签，并使用 Vue Router 的路由匹配逻辑来处理点击事件。

源码解析：

javascript

// router-link.js
import { h } from 'vue';

export default {
  name: 'RouterLink',
  props: {
    to: {
      type: [String, Object],
      required: true
    }
  },
  setup(props, { attrs }) {
    const { href, target, rel, onClick } = attrs;
    const resolved = resolveComponent(props.to);
    const active = isActive(resolved.path, props.to);
    
    return () => h('a', {
      href: href || resolved.href,
      target: target,
      rel: rel,
      onClick: (e) => onClick && onClick(e),
      onMousedown: () => handleLink(resolved),
    }, [props.children]);
  }
};

希望这篇文章能帮助你更好地了解和使用 router-link 组件，让你的 Vue Router 路由管理更加高效便捷！

欢迎在评论区分享你的经验和困惑，一起探讨学习，共同进步！

#Java后端需要学习哪些技术#

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

超级文本标签 a

属性 href 具体的资源位置

target 是否新打开一个页面进行跳转，默认不打开 _self _top

新打开空白页进行跳转 _blank

应用

1、跳转到具体资源

url 网络资源

path 本地资源