vue-router學習

elva 發布于2019-08-26 13:38 / 2474人閱讀

vue-router使用步驟(本教程并不全面，只研究到了本人夠用的程度，如果還想要深入了解路由，請在vue router 文檔中學習)：

手動：

npm 安裝 vue-router npm install vue-router

配置路由

1. 在main.js同級目錄下（目錄結構不一定要和我完全一樣）新建router.js；
2. 在router.js中引用vue 和 vue-router 并 用vue.use（）在vue中使用該插件
    import vue from  "vue"
    import router from "vue-router"
    vue.use(router)
3. 引入需要配置的頁面（可選）
    import Home from "./views/Home.vue"
4. 在router.js中配置路由
    1. 路由配置格式
        let routers = [
            {
                path:"/",
                name:"home", //可選
                component:Home //已經引入可以用這中方法
            },
            {
                path:"/about",
                name:"about", //可選
                component:()=> import("./views/About.vue")  
                        //沒有提前引入的頁面可以用該方法引入
            }
        ]
    2. 實例化該配置
        export default new router({
            routers
        })

在main.js中應用該router實例

1. 引入實例 `import router from "./router"`
1. 使用該實例 
    new Vue({
        ......
        router,
        ......
    })

在頁面中用來放置路由展示部分的html

在頁面中使用路由

    
    // “/home”要與 routers中的path一致

vue ui 輔助（初學者不建議使用該方法）

在vue ui 插件頁面右上角點擊添加vue-router

萬事大吉

額外知識點
npm 運行時如果main.js的vue實例中沒有 render 配置項則需要在vue.config.js文件中額外設置 runtimeCompiler 配置項為 true。（這個配置項設置為true后會使得項目最終打包文件大10kb 不建議使用該方法）

GPU云服務器云服務器 vue-router 學習機器學習學習機器學習學習深度學習學習

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

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

vue-router 學習

摘要：第一步路由配置項第二步路由映射全部精華路由參數是路由參數。和這兩行代碼，使用了用了具名路徑。對應路由配置中的，使用接收參數。參考 vue-router文檔使用Vue快速開發單頁應用 vue-router Vue.js——vue-router 60分鐘快速入門 Demo:https://github.com/keepfool/vue-tutorials/blob/master/...

Achilles 2019-08-20 11:19 評論0 收藏0
從頭開始學習vue-router

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。一、前言要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

tommego 2019-08-23 12:55 評論0 收藏0
從頭開始學習vue-router

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。一、前言要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

jhhfft 2019-08-02 11:56 評論0 收藏0
從頭開始學習vue-router

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。一、前言要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

frontoldman 2019-08-29 17:11 評論0 收藏0
Vue學習日記（三）——Vue路由管理vue-router

摘要：重定向可以實現某些需要根據特定邏輯改變頁面原本路由的需求，例如簡單的未登錄狀態下的頁面訪問個人信息路由時應該重定向到登錄路由頁面。前言為了給讀者更好的體驗，去理解vue-router和下一篇介紹vuex，決定還是來一個實戰教程來帶大家更加的去深入理解vue-router，在這之前，讀者先自行了解和去官網下載npm和node，附：npm官網項目構建這里我采用vue-cli+web...

iKcamp 2019-08-30 13:54 評論0 收藏0