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

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

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

手動(dòng)：

npm 安裝 vue-router npm install vue-router

配置路由

1. 在main.js同級(jí)目錄下（目錄結(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. 引入需要配置的頁(yè)面（可選）
    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")  
                        //沒(méi)有提前引入的頁(yè)面可以用該方法引入
            }
        ]
    2. 實(shí)例化該配置
        export default new router({
            routers
        })

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

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

在頁(yè)面中用來(lái)放置路由展示部分的html

在頁(yè)面中使用路由

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

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

在vue ui 插件頁(yè)面右上角點(diǎn)擊添加vue-router

萬(wàn)事大吉

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/109222.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

iKcamp 2019-08-30 13:54 評(píng)論0 收藏0