vue-router 基本操作

安裝 vue-router

在命令行中進入 vue 的項目目錄里,運行命令 npm install vue-router --save 來進行安裝

npm install vue-router --save

使用 vue-router

main.js 文件中引入 vue-router、安裝路由功能、定義組件并引入、創建 router 實例并進行配置、最后創建和掛載根實例。通過 router 配置參數注入路由,從而讓整個應用都有路由功能。代碼如下:

main.js

經過上面的配置之后呢,路由匹配到的組件將會渲染到 App.vue 里的 <router-view></router-view>(很關鍵)那么這個App.vue里應該這樣寫:
App.vue

這樣就會把渲染出來的頁面掛載到這個id為app的div里了。效果如下:

效果圖

重定向 redirect

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/Home'},                 // 這樣進/ 就會跳轉到/home
    { path: '/Home', component: Home }
  ]
})

嵌套路由

通過 /home/info 就可以訪問到 info 組件了

const router = new VueRouter({
  routes: [
    { path: '/Home', component: Home,
      children: [
        { path: 'Info', component: Info}
      ]
    }
  ]
})

路由懶加載

通過懶加載就不會一次性把所有組件都加載進來,而是當你訪問到那個組件的時候才會加載那一個。對于組件比較多的應用會提高首次加載速度。

const Home = () => import('./components/Home.vue')

路由對象和路由匹配

路由對象,即 $router 會被注入每個組件中,可以利用它進行一些信息的獲取:

屬性 說明
$route.path 當前路由對象的路徑,如 '/view/a'
$rotue.params 關于動態片段(如 /user/:username )的鍵值對信息,如 {username: 'paolino'}
$route.query 請求參數,如 /foo?user=1 獲取到 query.user = 1
$route.hash 當前路由的 hash 值 (帶 #) ,如果沒有 hash 值,則為空字符串
$route.fullPath 完成解析后的 URL,包含查詢參數和 hash 的完整路徑
$route.matched 一個數組,包含當前路由的所有嵌套路徑片段的路由記錄。路由記錄就是 routes 配置數組中的對象副本 (還有在 children 數組)
$route.name 當前路由的名稱
$route.redirectedFrom 如果存在重定向,即為重定向來源的路由的名字

小總結

綜合上述,一個包含重定向、嵌套路由、懶加載的 main.js 如下:

main.js

更詳細的 vue-router 功能請參考文檔:官方文檔

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1路由,其實就是指向的意思,當我點擊頁面上的home按鈕時,頁面中就要顯示home的內容,如果點擊頁面上的abou...
    你好陌生人丶閱讀 1,647評論 0 6
  • 轉載 :OpenDiggawesome-github-vue 是由OpenDigg整理并維護的Vue相關開源項目庫...
    果汁密碼閱讀 23,176評論 8 124
  • 一、基本用法 React Router 安裝命令如下。 $ npm install -S react-router...
    sunnyghx閱讀 4,539評論 0 6
  • 又是一天,永無止境,不停的工作又在不停的抱怨中度過了一天,同事之間,上下階乘。 就是煩,但是又有點開心。
    都是我的錯_a871閱讀 199評論 0 0
  • 之前寫了一篇篇幅不長的修圖文章,一不小心獲得了一些喜歡,還是蠻開心的。今天會分享更具體的一些手機修圖小方法,如果...
    遠方方方的景閱讀 15,337評論 87 1,078