欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue路由vue-router用法講解

 更新時(shí)間：2022年01月23日 12:00:46   作者：累成一條狗  
這篇文章介紹了Vue路由vue-router的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、vue-router

1、簡介

（1）SPA：Single Page Application（單頁應(yīng)用），簡單理解就是只有一個(gè)web頁面的應(yīng)用。即加載單個(gè)HTML頁面，并根據(jù)用戶與程序的交互 動態(tài)更新頁面的 web應(yīng)用程序。其加載頁面時(shí)不會加載整個(gè)頁面，只是更新部分內(nèi)容。

（2）路由：指的是SPA的路徑管理器。SPA基于路由與組件，其中路由指定訪問路徑，并建立路由與組件的映射關(guān)系。通過切換路由，從而加載不同的組件。

2、使用流程

step1：安裝路由

【命令行輸入】
npm install vue-router --save

step2：引入路由

【main.js】
// 引入vue-router
import VueRouter from 'vue-router';

// 使用vue-router
Vue.use(VueRouter);

step3：創(chuàng)建路由對象并聲明路由規(guī)則（創(chuàng)建路由）

new VueRouter({
    routes: [
        //一個(gè)個(gè)對象
        { path: '/home', component: Home }，
        { path: '/about', component: About }
    ]
});

step4：將router實(shí)例傳入 Vue實(shí)例中（注冊路由）

new Vue({
  router: router,      // 使用路由對象
  render: h => h(App),
}).$mount('#app')

step5：使用路由

// 選擇路由
<router-link to='/about'>About</router-link>
<router-link to='/home'>Home</router-link>

// 映射組件
<router-view></router-view>

二、基本路由實(shí)現(xiàn)

（1）文件結(jié)構(gòu)：

（2）完整代碼:

【main.js】
import Vue from 'vue'
import App from './App.vue'

// 引入路由對象
import router from './router/router.js'

Vue.config.productionTip = false

new Vue({
    router: router,      // 使用路由對象
  render: h => h(App),
}).$mount('#app')



【App.vue】
<template>
    <div>
        <div>
            <router-link to='/about'>About</router-link>
            <br/>
            <br/>
            <router-link to='/home'>Home</router-link>
        </div>
        <br/>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <!--App -->
</template>

<script>
    export default {
    }
</script>

<style>

</style>


【About.vue】
<template>
    <div>About</div>
</template>

<script>
</script>

<style>
</style>


【Home.vue】
<template>
    <div>Home</div>
</template>

<script>
</script>

<style>
</style>


【router.js】
// 引入組件
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue'

// 使用組件
Vue.use(VueRouter)

// 向外拋出一個(gè)VueRouter
export default new VueRouter ({
    routes: [{
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home
        },
        // 默認(rèn)選中About組件
        {
            path: '/',
            redirect: '/about'
        },
    ]
})

（3）截圖：局部刷新組件的效果

點(diǎn)擊Home可以切換到Home組件，url路徑變。

點(diǎn)擊About可以切換到About組件，url路徑變。

三、嵌套路由

路由中套路由。
（1）文件結(jié)構(gòu)

（2）完整代碼

【在基本路由的基礎(chǔ)上修改代碼，給Home組件中 套個(gè)路由】
【router.js】
// 引入組件
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue'
import News from '../views/News.vue'
import Message from '../views/Message.vue'

// 使用組件
Vue.use(VueRouter)

// 向外拋出一個(gè)VueRouter
export default new VueRouter({
    routes: [{
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            // 使用 children 定義 子路由
            children: [{
                    path: '/home/news',
                    component: News
                },
                {
                    path: 'message', // 簡寫
                    component: Message
                },
                // 默認(rèn)選中 News組件
                {
                    path: '', // 簡寫
                    redirect: '/home/news'
                },
            ]
        },
        {
            path: '/',
            redirect: '/about'
        }
    ]
})



【Home.vue】
<template>
    <div>
        <div>
            <h1>Home</h1>
            <router-link to='/home/news'>News</router-link>
            <br/>
            <br/>
            <router-link to='/home/message'>Message</router-link>
        </div>
        <br/>
        <br/>
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
</script>

<style>
</style>


【Message.vue】
<template>
    <div>Message</div>
</template>

<script>
</script>

<style>
</style>


【News.vue】
<template>
    <div>News</div>
</template>

<script>
</script>

<style>
</style>

（3）測試截圖：
初始畫面，默認(rèn)選中 About組件

點(diǎn)擊Home組件，默認(rèn)選中News組件。

點(diǎn)擊Message組件。

四、緩存路由組件

1、為什么使用

默認(rèn)情況下，切換路由時(shí)，被切換的路由會被銷毀，當(dāng)重新切回時(shí)會被再次創(chuàng)建。如果想要保留之前的修改，可以使用緩存路由組件對象，緩存之前的修改。

2、如何使用

【原寫法】
<router-view></router-view>

【修改后】
<keep-alive>
    <router-view></router-view>
</keep-alive>

3、完整代碼

【對上述代碼進(jìn)行修改，增加一個(gè)文本框】

【App.vue】
<template>
    <div>
        <div>
            <router-link to='/about'>About</router-link>
            <br/>
            <br/>
            <router-link to='/home'>Home</router-link>
        </div>
        <br/>
        <div>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
    <!--App -->
</template>

<script>
    export default {
    }
</script>

<style>

</style>


【About.vue】
<template>
    <div>
        About
        <input type="text" />
    </div>
</template>

<script>
</script>

<style>
</style>

截圖：
初始界面：

輸入數(shù)據(jù)：

切換到Home組件

再切回About組件，值沒有被清除。

五、傳遞參數(shù)

1、通過url傳遞（param傳遞）

使用 冒號 + 參數(shù)名（:name）作為 占位符，并通過url 傳遞參數(shù)，使用$route.params接收參數(shù)。

【對上面代碼進(jìn)行修改】

【router.js】
// 引入組件
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue'

// 使用組件
Vue.use(VueRouter)

// 向外拋出一個(gè)VueRouter
export default new VueRouter({
    routes: [{
            path: '/about/:name/:age',
            component: About
        },
        {
            path: '/home',
            component: Home
        },
        {
            path: '/',
            redirect: '/home'
        }
    ]
})


【App.vue】
<template>
    <div>
        <div>
            <router-link to='/about/tom/22'>About</router-link>
            <br/>
            <br/>
            <router-link to='/home'>Home</router-link>
        </div>
        <br/>
        <div>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
    <!--App -->
</template>

<script>
    export default {
    }
</script>

<style>

</style>


【About.vue】
<template>
    <div>
        About
        <br />
        name: {{$route.params.name}}
        <br />
        age: {{$route.params.age}}
    </div>
</template>

<script>
</script>

<style>
</style>


【Home.vue】
<template>
    <div>
        <h1>Home</h1>
    </div>
</template>

<script>
</script>

<style>
</style>

截圖：
初始界面

點(diǎn)擊About，可以傳遞并接收參數(shù)

2、通過query傳遞

使用path匹配路由，并根據(jù)name定位路由，通過query傳遞參數(shù)，并使用$route.query接收參數(shù)。

【對上面代碼進(jìn)行修改】

【router.js】
// 引入組件
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue'

// 使用組件
Vue.use(VueRouter)

// 向外拋出一個(gè)VueRouter
export default new VueRouter({
    routes: [{
            path: '/about',
            name: 'About',
            component: About
        },
        {
            path: '/home',
            component: Home
        },
        {
            path: '/',
            redirect: '/home'
        }
    ]
})


【About.vue】
<template>
    <div>
        About
        <br />
        name: {{$route.query.name}}
        <br />
        age: {{$route.query.age}}
    </div>
</template>

<script>
</script>

<style>
</style>


【App.vue】
<template>
    <div>
        <div>
            <!--需要使用  :to-->
            <router-link :to="people">About</router-link>
            <br/>
            <br/>
            <router-link to='/home'>Home</router-link>
        </div>
        <br/>
        <div>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
    <!--App -->
</template>

<script>
    export default {
        data() {
            return {
                people: {name: 'About', query: {name: 'jarry', age: '32'}}
            }
        }
    }
</script>

<style>

</style>

截圖：
初始畫面：

點(diǎn)擊About，可以傳遞參數(shù)

3、通過param傳遞

與query類似，用name定位路由，但是通過 param傳遞參數(shù)，并使用$route.params接收參數(shù)。

【修改上面的文件】

【App.vue】
<template>
    <div>
        <div>
            <!--需要使用  :to-->
            <router-link :to="people">About</router-link>
            <br/>
            <br/>
            <router-link to='/home'>Home</router-link>
        </div>
        <br/>
        <div>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </div>
    <!--App -->
</template>

<script>
    export default {
        data() {
            return {
                people: {name: 'About', params: {name: 'jarry', age: '32'}}
            }
        }
    }
</script>

<style>

</style>


【About.vue】
<template>
    <div>
        About
        <br />
        name: {{$route.params.name}}
        <br />
        age: {{$route.params.age}}
    </div>
</template>

<script>
</script>

<style>
</style>

截圖：
初始畫面：

點(diǎn)擊About，參數(shù)傳遞正常。

六、$route 與 $router 的區(qū)別

1、$route

$route 指的是 路由信息的對象，其包含的是 路由的相關(guān)信息。比如：path，name，fullPath，query，params，meta。

  • （1）$route.path 與 $route.fullPath

對應(yīng)當(dāng)前路由的路徑。

  • （2）$route.query 與 $route.params

都屬于 key-value對象，表示url 傳遞的參數(shù)。

  • （3）$route.name

指的是當(dāng)前路由的名字。

2、$router

$router 指的是 路由實(shí)例的對象，即new VueRouter創(chuàng)建的實(shí)例。其包含了常用的方法（比如 push()，replace()， back()等方法）。

  • （1）$router.push()

使用 push 方法可以向 瀏覽器的 history 棧中添加一個(gè)新的記錄，當(dāng)點(diǎn)擊瀏覽器的返回按鈕 或 觸發(fā) back 方法時(shí)，可以返回之前的頁面。

  • （2）$router.replace()

使用 replace 方法 不會向 history中添加記錄，而是替換當(dāng)前的記錄，此時(shí)點(diǎn)擊后退按鈕不會返回之前的頁面。

3、跳轉(zhuǎn)路由的三種形式

（1）通過標(biāo)簽實(shí)現(xiàn)。

<router-link> + <router-view> 實(shí)現(xiàn)。

（2）通過js代碼實(shí)現(xiàn)。（可以傳遞參數(shù)，增加一個(gè) query屬性即可）

this.$router.replace({ path:'/Login'})   
this.$router.replace({ path:'/Login', query: {name: 'tom'})

（3）通過js代碼實(shí)現(xiàn)。

this.$router.push({ path:'/Login'})

到此這篇關(guān)于Vue路由vue-router用法講解的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • vue 項(xiàng)目中的this.$get,this.$post等$的用法案例詳解

    vue 項(xiàng)目中的this.$get,this.$post等$的用法案例詳解

    vue.js的插件應(yīng)該暴露一個(gè)install方法。這個(gè)方法的第一個(gè)參數(shù)是vue構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對象，首頁要安裝axios，本文結(jié)合案例代碼給大家詳細(xì)講解vue 中的this.$get,this.$post等$的用法，一起學(xué)習(xí)下吧
    2022-12-12
  • vue自動添加瀏覽器兼容前后綴操作

    vue自動添加瀏覽器兼容前后綴操作

    這篇文章主要介紹了vue自動添加瀏覽器兼容前后綴操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue 項(xiàng)目中使用Loading組件的示例代碼

    vue 項(xiàng)目中使用Loading組件的示例代碼

    這篇文章主要介紹了vue 項(xiàng)目中使用Loading組件的示例代碼，使用 loding 過渡數(shù)據(jù)的加載時(shí)間
    2018-08-08
  • vue3通過父子傳值實(shí)現(xiàn)彈框功能

    vue3通過父子傳值實(shí)現(xiàn)彈框功能

    在Vue3中,我們可以通過?provide?和?inject?來實(shí)現(xiàn)父子組件之間的數(shù)據(jù)傳遞,這也適用于實(shí)現(xiàn)彈框功能,下面我們就來學(xué)習(xí)一下vue3實(shí)現(xiàn)彈框功能的具體方法吧
    2023-12-12
  • 淺析webpack-bundle-analyzer在vue-cli3中的使用

    淺析webpack-bundle-analyzer在vue-cli3中的使用

    這篇文章主要介紹了webpack-bundle-analyzer在vue-cli3中的使用,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2019-10-10
  • vue src動態(tài)加載請求獲取圖片的方法

    vue src動態(tài)加載請求獲取圖片的方法

    這篇文章主要為大家詳細(xì)介紹了vue src動態(tài)加載請求獲取圖片的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2018-10-10
  • 淺析一下Vue3的響應(yīng)式原理

    淺析一下Vue3的響應(yīng)式原理

    這篇文章主要通過示例和大家一起淺析一下Vue3的響應(yīng)式原理，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue3有一定幫助，需要的可以參考一下
    2022-08-08
  • el-table表格動態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)

    el-table表格動態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)

    工作時(shí)遇到的el-table合并單元格的需求，本文主要介紹了el-table表格動態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • 教你在vue?中使用?svg?symbols

    教你在vue?中使用?svg?symbols

    這篇文章主要介紹了如何在?vue?中使用?svg?symbols，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-08-08
  • 解決ElementUI組件中el-upload上傳圖片不顯示問題

    解決ElementUI組件中el-upload上傳圖片不顯示問題

    這篇文章主要介紹了解決ElementUI組件中el-upload上傳圖片不顯示問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-10-10

最新評論