最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue路由vue-router用法講解

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

一、vue-router

1、簡介

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

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

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: [
        //一個個對象
        { path: '/home', component: Home }，
        { path: '/about', component: About }
    ]
});

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

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>

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

（1）文件結構：

（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)

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

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

點擊Home可以切換到Home組件，url路徑變。

點擊About可以切換到About組件，url路徑變。

三、嵌套路由

路由中套路由。
（1）文件結構

（2）完整代碼

【在基本路由的基礎上修改代碼，給Home組件中 套個路由】
【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)

// 向外拋出一個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
                },
                // 默認選中 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）測試截圖：
初始畫面，默認選中 About組件

點擊Home組件，默認選中News組件。

點擊Message組件。

四、緩存路由組件

1、為什么使用

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

2、如何使用

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

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

3、完整代碼

【對上述代碼進行修改，增加一個文本框】

【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ù)據：

切換到Home組件

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

五、傳遞參數(shù)

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

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

【對上面代碼進行修改】

【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)

// 向外拋出一個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>

截圖：
初始界面

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

2、通過query傳遞

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

【對上面代碼進行修改】

【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)

// 向外拋出一個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>

截圖：
初始畫面：

點擊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>

截圖：
初始畫面：

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

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

1、$route

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

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

對應當前路由的路徑。

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

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

  • （3）$route.name

指的是當前路由的名字。

2、$router

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

  • （1）$router.push()

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

  • （2）$router.replace()

使用 replace 方法 不會向 history中添加記錄，而是替換當前的記錄，此時點擊后退按鈕不會返回之前的頁面。

3、跳轉路由的三種形式

（1）通過標簽實現(xiàn)。

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

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

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

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

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

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

相關文章

  • 在vue3中使用el-tree-select實現(xiàn)樹形下拉選擇器效果

    在vue3中使用el-tree-select實現(xiàn)樹形下拉選擇器效果

    el-tree-select是一個含有下拉菜單的樹形選擇器,結合了?el-tree?和?el-select?兩個組件的功能,這篇文章主要介紹了在vue3中使用el-tree-select做一個樹形下拉選擇器,需要的朋友可以參考下
    2024-03-03
  • Vue.js原理分析之nextTick實現(xiàn)詳解

    Vue.js原理分析之nextTick實現(xiàn)詳解

    這篇文章主要給大家介紹了關于Vue.js原理分析之nextTick實現(xiàn)的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-09-09
  • vue 純js監(jiān)聽滾動條到底部的實例講解

    vue 純js監(jiān)聽滾動條到底部的實例講解

    今天小編就為大家分享一篇vue 純js監(jiān)聽滾動條到底部的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue中watch和computed的區(qū)別與使用方法

    vue中watch和computed的區(qū)別與使用方法

    這篇文章主要給大家介紹了關于vue中watch和computed的區(qū)別與使用方法的相關資料，文中通過實例代碼結束的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
    2020-08-08
  • vue-router安裝和使用詳解

    vue-router安裝和使用詳解

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構建單頁面應用,分步驟介紹了安裝和使用vue-router的方法,感興趣的朋友跟隨小編一起看看吧
    2023-08-08
  • vue使用websocket實現(xiàn)實時數(shù)據推送功能

    vue使用websocket實現(xiàn)實時數(shù)據推送功能

    這篇文章主要為大家詳細介紹了vue如何使用websocket實現(xiàn)實時數(shù)據推送,發(fā)布訂閱重連單點登錄功能,感興趣的小伙伴可以跟隨小編一起學習一下
    2023-12-12
  • 基于Vue sessionStorage實現(xiàn)保留搜索框搜索內容

    基于Vue sessionStorage實現(xiàn)保留搜索框搜索內容

    這篇文章主要介紹了基于Vue sessionStorage實現(xiàn)保留搜索框搜索內容,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-06-06
  • vue2.0 自定義 餅狀圖 (Echarts)組件的方法

    vue2.0 自定義 餅狀圖 (Echarts)組件的方法

    下面小編就為大家分享一篇vue2.0 自定義 餅狀圖 (Echarts)組件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • Vue3使用Element?Plus實現(xiàn)列表界面的方法步驟

    Vue3使用Element?Plus實現(xiàn)列表界面的方法步驟

    寫后臺管理的時候會有很多列表以及相應的條件查詢,下面這篇文章主要給大家介紹了關于Vue3使用Element?Plus實現(xiàn)列表界面的方法步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-04-04
  • Vue父子組件傳值的一些坑

    Vue父子組件傳值的一些坑

    這篇文章主要介紹了Vue父子組件傳值的一些坑，幫助大家更好的理解和使用vue父子組件，感興趣的朋友可以了解下
    2020-09-09

最新評論

普安县| 偏关县| 青河县| 唐河县| 苍山县| 政和县| 睢宁县| 忻州市| 台湾省| 永靖县| 绥阳县| 松原市| 西昌市| 冕宁县| 玉田县| 荔波县| 蒙城县| 轮台县| 仙居县| 麦盖提县| 资源县| 太仓市| 鸡西市| 米易县| 轮台县| 都昌县| 津市市| 南岸区| 象州县| 大姚县| 石棉县| 鸡泽县| 庆阳市| 达州市| 新乡市| 临安市| 泊头市| 富宁县| 阿克| 肃南| 荥阳市|