vue頁面跳轉,以及攜帶參數,獲取參數

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')  
}


 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章