Declarative Navigation for uni-app Declarative navigation jump of uni-app Jump to normal page < navigator url= "../detail/detail" > 跳转到详情< / navigator>
< navigator url= "../test/test" > 跳转到test< / navigator>
Jump to the tabbar page
Need to add this property: open-type="switchTab"
< navigator url= "../index/index" open- type= "switchTab" > 跳转到首页< / navigator>
< navigator url= "../about/about" open- type= "switchTab" > 跳转到about< / navigator>
open-type related values redirect
redirect
It is to close the current page (the page has been uninstalled), and then jump to the page set by the url, there is no previous page record
< navigator url= "../detail/detail" open- type= "redirect" > 跳转到详情< / navigator>
Effect
Declarative navigation parameters of uni-app url method passing parameters < template>
< view>
< navigator url= "../detail/detail?id=100&name=pink" > 跳转到详情< / navigator>
< ! -- < button @click= "goDetail" > 跳转到详情< / button>
< button type= "default" @click= "goDetail2" > 跳转到详情< / button> -- >
< / view>
< / template> < script>
export default {
data ( ) {
return {
}
} ,
methods : {
} ,
}
< / script>
Effect
The page gets the passed parameter data < template>
< view>
< view class = "box3" > < / view>
< / view>
< / template>
< script>
export default {
data ( ) {
return {
}
} ,
methods : {
} ,
onLoad ( options ) {
console. log ( "页面加载 options" , options) ;
}
}
< / script>
Effect
Programmatic navigation of uni-app Programmatic navigation jump of uni-app uni.navigateTo(OBJECT)
Keep the current page, jump to a page in the app, and use uni.navigateBack to return to the original page.
< template>
< view>
< button @click= "goDetail" > 跳转到详情< / button>
< / view>
< / template> < script>
export default {
data ( ) {
return {
}
} ,
methods : {
goDetail ( ) {
uni. navigateTo ( {
url : "../detail/detail" ,
animationType : 'pop-in' ,
} )
} ,
} ,
}
< / script>
uni.switchTab(OBJECT)
Jump to the tabBar page and close all other non-tabBar pages
< template>
< view>
< view class = "box3" > < / view>
< button type= "default" @click= "goAbout" > 跳转到about< / button>
< / view>
< / template>
< script>
export default {
data ( ) {
return {
}
} ,
methods : {
goAbout ( ) {
uni. switchTab ( {
url : "../about/about" ,
} )
} ,
} ,
onUnload ( ) {
console. log ( "详情页 卸载" ) ;
}
}
< / script>
From the details page, click to jump to about, because about is the page of the tabbar component, but the details page is not a tabbar, all non-tabbar pages will be uninstalled
uni.redirectTo(OBJECT)
Close the current page and jump to a page in the app.
< template>
< view>
< button type= "default" @click= "goDetail2" > 跳转到详情< / button>
< / view>
< / template> < script>
export default {
data ( ) {
return {
}
} ,
methods : {
goDetail2 ( ) {
uni. redirectTo ( {
url : "../detail/detail" ,
} )
}
} ,
onUnload ( ) {
console. log ( "msg 卸载" ) ;
}
}
< / script>
Effect
When jumping to the details page, the current msg page will be closed, that is, unloaded, and the onUnload function will be triggered
Programmatic navigation parameters The current page, jump to the next page, pass the parameter value < template>
< view>
< button @click= "goDetail" > 跳转到详情< / button>
< / view>
< / template> < script>
export default {
data ( ) {
return {
}
} ,
methods : {
goDetail ( ) {
uni. navigateTo ( {
url : "../detail/detail?id=10&name=ppp"
} )
}
} ,
}
< / script>
Effect
After jumping to the page, get the passed parameters < template>
< view>
< view class = "box3" > < / view>
< / view>
< / template>
< script>
export default {
data ( ) {
return {
}
} ,
methods : {
} ,
onLoad ( options ) {
console. log ( "页面加载-options" , options) ;
}
}
< / script>
Effect
