Vue2從0到1(二)：Vue-router的使用

JellyBool 發布于2019-08-21 16:40 / 1518人閱讀

摘要：將路由寫法改為定義路由的方法跳轉路由字符串對象命名的路由帶查詢參數，變成下一章講解狀態管理以上代碼代碼親測可用，托管在上面，歡迎參考文獻效果圖

上一篇講了Vue起步：環境的搭建用webpack打包vue 下面講一下vue路由vue-router 8.使用路由vue-router2

首先安裝 vue-router:

npm install vue-router --save

修改main.js:

1.引入APP,about兩個組件導入router組件
引入子組件Child

    import App from "./src/index.vue";
    import About from "./src/about.vue";
    import Child from "./src/children.vue" 
    import VueRouter from "vue-router";

    Vue.use(VueRouter)

2.定義路由：
嵌套路由用children:[]存放,子組件在父組件的

中渲染,路由通過 "/:id" 定義參數通過鏈接 "/about/123"傳遞參數
在組件中通過{{$route.params.id}}獲取傳參

const routes = [
    { path: "/index", component: App },
    { path: "/about/:id", component: About ,children:[
        { path: "child", component: child}
    ]}
]

創建 router 實例，然后傳 routes 配置

    const router = new VueRouter({
        routes // （縮寫）相當于 routes: routes
    })

創建和掛載根實例。

    const app = new Vue({
        router
    }).$mount("#main")

5.修改index.html文件

    
        
            index
            about
            child router

6.修改父組件about.vue
寫才發現，只能有一個頂級的HTML標簽


    
        {{ msg }}
        
        傳遞的參數為：{{ $route.params.id }}

8.1路由重定向redirect

routes: [
    ...
    { path: "/a", redirect: "/index" }
  ]

訪問/a時將跳轉值/index對應的組件

8.2 路由懶加載

用vue.js寫單頁面應用時，會出現打包后的JavaScript包非常大，影響頁面加載，我們可以利用路由的懶加載去優化這個問題。將路由寫法改為：

//定義路由
const routes = [
    { path: "/index", component: resolve => require(["./src/index.vue"], resolve) },
    {
        path: "/about/:id", component: resolve => require(["./src/about.vue"], resolve) ,
        children:[
            { path: "child", component: resolve => require(["./src/children.vue"], resolve)}
    ]},
    { path: "/a", redirect: "/index" }
]

8.3 js的方法跳轉路由

    // 字符串
    router.push("home")
    // 對象
    router.push({ path: "home" })
    // 命名的路由
    router.push({ name: "user", params: { userId: 123 }})
    // 帶查詢參數，變成 /register?plan=private
    router.push({ path: "register", query: { plan: "private" }})

下一章講解狀態管理Vuex

以上代碼代碼親測可用，托管在github上面，歡迎star

參考文獻:vue-router
效果圖:

GPU云服務器云服務器從0到1搭建視頻通話系統從0開始到1千萬用戶 vue2.0 cdn 從1個想法到35萬活躍用戶

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88596.html

關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
【轉】使用Vue-Router 2實現路由功能

摘要：請輸入代碼注意只適用于版本，下面我們是基于講的如何使用實現路由功能。一使用路由在中，需要明確安裝路由功能定義組件，這里使用從其他文件進來定義路由創建實例，然后傳配置創建和掛載根實例。路由記錄就是配置數組中的對象副本還有在數組。請輸入代碼注意：vue-router 2只適用于Vue2.x版本，下面我們是基于vue2.0講的如何使用vue-router 2實現路由功能。推薦使用npm安裝...

seanlook 2019-08-21 15:36 評論0 收藏0
vue2實踐（持續更新）

摘要：記錄一些小技巧和踩過的坑由于本篇文章內容太多，導致編輯器有點卡，所以新開辟了一篇實踐二，后續再這里更新。組件的生命周期函數是在標簽里的數據發生變化時候觸發數據可能更新了，但是沒有綁定到上面的話，不會調用鉤子函數。記錄一些小技巧和踩過的坑由于本篇文章內容太多，導致SF編輯器有點卡，所以新開辟了一篇 vue2實踐（二），后續再這里更新。 1. props 帶不帶冒號的區別 ...

n7then 2019-08-20 15:05 評論0 收藏0