vue-router學(xué)習(xí)

elva 發(fā)布于2019-08-26 13:38 / 2543人閱讀

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

手動：

npm 安裝 vue-router npm install vue-router

配置路由

1. 在main.js同級目錄下（目錄結(jié)構(gòu)不一定要和我完全一樣）新建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 //已經(jīng)引入可以用這中方法
            },
            {
                path:"/about",
                name:"about", //可選
                component:()=> import("./views/About.vue")  
                        //沒有提前引入的頁面可以用該方法引入
            }
        ]
    2. 實例化該配置
        export default new router({
            routers
        })

在main.js中應(yīng)用該router實例

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

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

在頁面中使用路由

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

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

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

萬事大吉

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

云服務(wù)器 GPU云服務(wù)器 vue-router 學(xué)習(xí)機器學(xué)習(xí)學(xué)習(xí) 機器學(xué)習(xí)學(xué)習(xí) 深度學(xué)習(xí)學(xué)習(xí)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/109222.html

相關(guān)文章

vue-router 學(xué)習(xí)

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

Achilles 2019-08-20 11:19 評論0 收藏0
從頭開始學(xué)習(xí)vue-router

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

tommego 2019-08-23 12:55 評論0 收藏0
從頭開始學(xué)習(xí)vue-router

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

jhhfft 2019-08-02 11:56 評論0 收藏0
從頭開始學(xué)習(xí)vue-router

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

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

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

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