整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
：navigator方式：
要想通過(guò) navigator 實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)我們要用到url屬性。
open-type屬性可用值（直接上官網(wǎng)截圖）：
注意點(diǎn)：不能帶頁(yè)面后綴文件“.wxml”，帶了后不能跳轉(zhuǎn)。
錯(cuò)的方式：
<navigator url="/pages/fgclass/meateclass/meateclass.wxml">熱門推薦頁(yè)面跳到肉類頁(yè)</navigator>
對(duì)的方式：
<navigator url="/pages/fgclass/meateclass/meateclass">熱門推薦頁(yè)面跳轉(zhuǎn)</navigator>
2.頁(yè)面跳轉(zhuǎn)傳參：
<navigator url="/pages/fgclass/meateclass/meateclass?param=longdb">熱門推薦頁(yè)面跳轉(zhuǎn)傳參數(shù)
</navigator>
被跳到的頁(yè)面接收參數(shù)：
只要我們?cè)趗rl中定義了param參數(shù)，在被跳轉(zhuǎn)頁(yè)面里就能在 onload周期函數(shù)的參數(shù)options里拿到。
取出參數(shù)值
二：API方式（官網(wǎng)：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html）:
Api跳轉(zhuǎn)方法列表：
wx.navigateTo()保留當(dāng)前??，跳轉(zhuǎn)到應(yīng)?內(nèi)的某個(gè)??。但是不能跳到 tabbar ??
wx.switchTap()跳轉(zhuǎn)到 tabBar ??，并關(guān)閉其他所有? tabBar ??
wx.reLaunch()關(guān)閉所有??，打開(kāi)到應(yīng)?內(nèi)的某個(gè)??
wx.redirectTo()關(guān)閉當(dāng)前??，跳轉(zhuǎn)到應(yīng)?內(nèi)的某個(gè)??。但是不允許跳轉(zhuǎn)到 tabbar ??
wx.navigateBack()關(guān)閉當(dāng)前??，返回上???或多級(jí)??
官網(wǎng)截圖
1.API跳轉(zhuǎn)頁(yè)面不帶參數(shù)：
/** api跳轉(zhuǎn)**/
bindNavigateto:function(){
url: '/pages/fgclass/meateclass/meateclass',
})
},
2：API跳轉(zhuǎn)頁(yè)面帶參數(shù)：
/** api跳轉(zhuǎn)**/
bindNavigateto:function(){
wx.navigateTo({
//url: '/pages/fgclass/meateclass/meateclass.wxml',
url: '/pages/fgclass/meateclass/meateclass?param=apijump',
})
},
在meateclass.js里這樣接收參數(shù)：
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
console.log(options);
this.setData({
meateparater:options.param,
})
},
注意點(diǎn)：不能帶頁(yè)面后綴文件“.wxml”，帶了后不能跳轉(zhuǎn)。
總結(jié)：
以上就是小程序的兩種跳轉(zhuǎn)方式，是不是很簡(jiǎn)單？另外的幾個(gè)跳轉(zhuǎn)api就不寫啦。
謝謝瀏覽，謝謝點(diǎn)贊和評(píng)論，覺(jué)得對(duì)你有用的就關(guān)注下唄，我也會(huì)關(guān)注你的。
我是只說(shuō)代碼的大餅。
一定離不開(kāi) Vue Router 來(lái)管理你的應(yīng)用路由。
而 router-link 組件就是 Vue Router 提供給我們的秘密武器，它可以讓你輕松實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，并擁有豐富的功能和靈活的配置。
今天，我們就來(lái)深入了解一下 router-link 的用法和奧秘！
1. 基礎(chǔ)用法：
router-link 組件接受一個(gè) to 屬性，用于指定跳轉(zhuǎn)的目標(biāo)路由路徑。簡(jiǎn)單來(lái)說(shuō)，你只需要將 router-link 組件包裹在需要跳轉(zhuǎn)的鏈接文本或元素上，就可以實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)了。
示例代碼：
html<template>
<div>
<router-link to="/">首頁(yè)</router-link>
<router-link to="/about">關(guān)于我們</router-link>
</div>
</template>
<script>
export default {
// ...
};
</script>
2. 鏈接文本和元素：
默認(rèn)情況下，router-link 組件會(huì)將 to 屬性的值作為鏈接文本。可以使用 router-link 組件的 tag 屬性指定其他元素標(biāo)簽，例如 a、button 等。
示例代碼：
html<template>
<div>
<!-- 使用 a 標(biāo)簽 -->
<router-link to="/" tag="a">首頁(yè)</router-link>
<!-- 使用 button 標(biāo)簽 -->
<router-link to="/about" tag="button">關(guān)于我們</router-link>
</div>
</template>
3. 傳遞參數(shù)：
router-link 組件支持傳遞參數(shù)，可以通過(guò) params 或 query 屬性進(jìn)行傳遞。
示例代碼：
html<template>
<div>
<!-- 使用 params 傳遞參數(shù) -->
<router-link :to="{ name: 'user', params: { id: 1 } }">用戶詳情</router-link>
<!-- 使用 query 傳遞參數(shù) -->
<router-link :to="{ path: '/search', query: { keyword: 'vue' } }">搜索</router-link>
</div>
</template>
4. 自定義激活樣式：
router-link 組件提供了 active-class 屬性，用于自定義當(dāng)前激活路由的樣式。
示例代碼：
html<template>
<div>
<router-link to="/" active-class="active">首頁(yè)</router-link>
</div>
</template>
<style scoped>
.active {
color: red;
}
</style>
5. router-link 組件的解析：
router-link 組件最終會(huì)被渲染成一個(gè) <a> 標(biāo)簽，并使用 Vue Router 的路由匹配邏輯來(lái)處理點(diǎn)擊事件。
源碼解析：
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 路由管理更加高效便捷！
歡迎在評(píng)論區(qū)分享你的經(jīng)驗(yàn)和困惑，一起探討學(xué)習(xí)，共同進(jìn)步！
#Java后端需要學(xué)習(xí)哪些技術(shù)#
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
超級(jí)文本標(biāo)簽 a
屬性 href 具體的資源位置
target 是否新打開(kāi)一個(gè)頁(yè)面進(jìn)行跳轉(zhuǎn)，默認(rèn)不打開(kāi) _self _top
新打開(kāi)空白頁(yè)進(jìn)行跳轉(zhuǎn) _blank
應(yīng)用
1、跳轉(zhuǎn)到具體資源
url 網(wǎng)絡(luò)資源
path 本地資源
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
