1. 程式人生 > >vue2.0的常用功能簡介

vue2.0的常用功能簡介

span nbsp color -i highlight href out con router

  1. 路由跳轉

    當我們想要實現點擊鏈接跳轉時,可以使用$router來進行跳轉

    語法如下:

    this.$router.push({path:"/www",query:{id:1222}})

    這裏path是要跳轉的路徑,query裏面是路徑跳轉時要攜帶的參數,以對象的形式存在

  2. 2

    獲取路由參數

    跳轉路由過後,我們可能想要獲取路由上的參數,這裏我們可以使用

    this.$route.query.id  (id為想要獲取的參數)
    

  3. 3

    獲取當前頁面的路徑

    想要獲取當前文件的路徑名稱,除了原聲的location.href之外,也可以利用$route來獲取

    this.$route.path
    
  4. 4

    離開頁面時彈窗

    在有時候我們開發時可能為某個頁面添加這樣的功能就是在用戶離開某個頁面時進行彈窗,用來提示用戶一些信息。這時候可以用到路由的導航鉤子

    beforeRouteLeave
    
    beforeRouteLeave(to,from,next){
    
    //do something
    
    },
    

  5. 5

    操作dom

    雖然vue提倡我們盡量以數據為驅動,但是有時候我們不得不觸及要操作dom,

    這個使用除了原生js之外,操作dom可以使用ref直接綁定一個元素節點或者使用this.$el來操作具體的屬性值。

vue2.0的常用功能簡介