vue-router(單頁面應用控制中心)常見用法

  • 時間:2019-12-04 14:26 作者:Nice先生的狂想曲 來源: 閱讀:225
  • 掃一掃,手機訪問
摘要:前言vue router控制頁面跳轉,重點在于“升級視圖但不重新請求頁面”,并且擁有懶加載功能。推薦配置寫法(開啟頁面跳轉至組件,懶加載)export default new Router({ routes: [{ path: '/home', name: 'home', com

前言

vue-router控制頁面跳轉,重點在于“升級視圖但不重新請求頁面”,并且擁有懶加載功能。


推薦配置寫法(開啟頁面跳轉至組件,懶加載)

export default new Router({  routes: [{    path: '/home',    name: 'home',    component: () => import('home.vue') //懶加載  }]})

之后在App.vue中插入<router-view></router-view>既可。

事件跳轉

在點擊等事件觸發時執行方法,另外假如需要傳遞參數,則可以在push方法中以query: { a: '111'}

  this.$router.push( { path: '/home' } ) // 該處path對應在配置中的路徑

當然也可以用 鏈接 的方式進行跳轉

<router-link to="/home"></router-link>
動態路由
export default new Router({  routes: [{    path: '/home/:id',//傳參,當/后面接任何字符串均可    name: 'home',    component: () => import('home.vue')  }]})

另組件內獲取參數的方法

<h1>{{ $route.params.id }}</h1>
嵌套路由

當你需要只改變布局中的一部分頁面時

  routes: [{    path: '/home',    name: 'home',    component: () => import('home.vue')    children: [{      path: '/child',      component: () => import('child.vue')    }]  }]

之后在home.vue中插入<router-view></router-view>既可

push() 傳遞參數

在事件跳轉中我們說到push方法中可以query: { a: '111'}進行參數傳遞

  this.$router.push( { path: '/home' , query: { a: '111'}} ) 

此外我們還能用params : { a: '111'}進行傳參,但是注意此時push方法不再用path,而用name,否則會有錯誤!

  this.$router.push( { name: 'home' , params: { a: '111'}} ) 

事實上,vue-router的用法并不僅僅只有這些,并且他有自己的鉤子函數,例如可以利用beforeEach記錄跳轉的路徑,同時假如不加入next()方法則路由無法跳轉,相似于 Generator 函數的駐點

router.beforeEach(to, from, next) => {  console.log(to.path)  next() }
  • 全部評論(0)
上一篇:MySQL InnoDB 事務
下一篇:Linux中的Kill命令
最新發布的資訊信息
【系統環境|】如何選擇一家專業的游戲軟件開發公司?(2020-05-13 15:56)
【系統環境|服務器應用】樹莓派安裝TensorFlow(2020-04-24 21:11)
【系統環境|服務器應用】防面試-SD_WebImage(2020-04-24 21:11)
【系統環境|服務器應用】推薦一款視頻控件xgplayer(2020-04-24 21:11)
【系統環境|服務器應用】PostgreSQL 源碼解讀(27)- 查詢語句#12(查詢優化-上拉子鏈接#2)(2020-04-24 21:11)
【系統環境|服務器應用】如何輕松學習JavaScript?(2020-04-24 21:10)
【系統環境|服務器應用】【源碼剖析】Launcher 8.0 源碼 (12) --- Launcher 啟動流程 第五步之計算桌面各布局細節參數(2020-04-24 21:10)
【系統環境|服務器應用】前臺碰撞室之console.log與文本字符(2020-04-24 21:10)
【系統環境|服務器應用】好用的Middleware實現(2020-04-24 21:10)
【系統環境|服務器應用】前臺面試每日 3+1 —— 第373天(2020-04-24 21:10)
手機二維碼手機訪問領取大禮包
返回頂部
双色球号码300期遗传走势图