js操作路由(即編程式的導航)進行頁面跳轉:
1. 返回/前進一頁:
返回:this.$router.go(-1)、this.$router.back()。
前進:this.$router.go(1)
2. 跳轉到其他頁:
//params只能用name來引入路由,類似於post,在瀏覽器地址欄中不顯示參數,
//而query 要用path引入,似於我們ajax中get傳參,在瀏覽器地址欄中顯示參數
this.$router.push("/parent")
this.$router.push({path:"/parent",query:{name:"ace"}) //即瀏覽歷史紀錄保存着,query是參數。獲取參數:this.$route.query.name
this.$router.push({path:`/argu/${name}`}) //es6帶參數跳轉,針對router.js中配置path: '/argu/:name',。獲取參數:this.$route.query.name
this.$router.push({name:"parent",params:{name:"ace"}) //帶參數跳轉。獲取參數:this.$route.params.name
3. 用其他頁替換本頁:this.$router.replace("/about")或this.$router.replace({name:"parent"}),即瀏覽歷史紀錄沒有了。
4. 基於動態路由的頁面(path: '/argu/:name')傳值。
{
path: '/argu/:name',
props:true, //表示允許Argu.vue組件中props:{}中接受name參數值,然後可以直接渲染在頁面{{name}}
component: () => import( './views/argu.vue' )
}
5. 基於普通頁面傳參,對象模式傳參。
{
path: '/about',
props:{
food:"香蕉"
}, //表示允許about.vue組件中props:{}中接受food參數值,然後可以直接渲染在頁面{{food}}
component: () => import( './views/argu.vue')
}
6. 基於普通頁面傳參,函數模式傳參。
{
path: '/parent',
props: route=>{
return {
food:route.query.food
}
}, //表示允許parent.vue組件中props:{}中接受food參數值,然後可以直接渲染在頁面{{food}}
component: () => import( './views/argu.vue')
}