中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue路由vue-router怎么用

發布時間:2022-01-24 09:23:57 來源:億速云 閱讀:138 作者:小新 欄目:開發技術

這篇文章主要為大家展示了“Vue路由vue-router怎么用”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“Vue路由vue-router怎么用”這篇文章吧。

一、vue-router

1、簡介

(1)SPA:Single Page Application(單頁應用),簡單理解就是只有一個web頁面的應用。即加載單個HTML頁面,并根據用戶與程序的交互 動態更新頁面的 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:創建路由對象并聲明路由規則(創建路由)

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>

二、基本路由實現

(1)文件結構:

Vue路由vue-router怎么用

(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)截圖:局部刷新組件的效果

Vue路由vue-router怎么用

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

Vue路由vue-router怎么用

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

Vue路由vue-router怎么用

三、嵌套路由

路由中套路由。
(1)文件結構

Vue路由vue-router怎么用

(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>
            <h2>Home</h2>
            <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組件

Vue路由vue-router怎么用

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

Vue路由vue-router怎么用

點擊Message組件。

Vue路由vue-router怎么用

四、緩存路由組件

1、為什么使用

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

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>

截圖:
初始界面:

Vue路由vue-router怎么用

輸入數據:

Vue路由vue-router怎么用

切換到Home組件

Vue路由vue-router怎么用

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

Vue路由vue-router怎么用

五、傳遞參數

1、通過url傳遞(param傳遞)

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

【對上面代碼進行修改】

【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>
        <h2>Home</h2>
    </div>
</template>

<script>
</script>

<style>
</style>

截圖:
初始界面

Vue路由vue-router怎么用

點擊About,可以傳遞并接收參數

Vue路由vue-router怎么用

2、通過query傳遞

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

【對上面代碼進行修改】

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

截圖:
初始畫面:

Vue路由vue-router怎么用

點擊About,可以傳遞參數

Vue路由vue-router怎么用

3、通過param傳遞

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

【修改上面的文件】

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

截圖:
初始畫面:

Vue路由vue-router怎么用

點擊About,參數傳遞正常。

Vue路由vue-router怎么用

六、$route 與 $router 的區別

1、$route

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

Vue路由vue-router怎么用

  • (1)$route.path 與 $route.fullPath

對應當前路由的路徑。

  • (2)$route.query 與 $route.params

都屬于 key-value對象,表示url 傳遞的參數。

  • (3)$route.name

指的是當前路由的名字。

2、$router

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

  • (1)$router.push()

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

  • (2)$router.replace()

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

3、跳轉路由的三種形式

(1)通過標簽實現。

<router-link> + <router-view> 實現。

(2)通過js代碼實現。(可以傳遞參數,增加一個 query屬性即可)

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

(3)通過js代碼實現。

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

以上是“Vue路由vue-router怎么用”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

长白| 卢龙县| 绵竹市| 格尔木市| 延安市| 康马县| 无棣县| 洪泽县| 武功县| 沂南县| 岗巴县| 四子王旗| 老河口市| 博湖县| 集贤县| 五指山市| 临安市| 兴安县| 阿拉尔市| 红桥区| 浠水县| 宝山区| 额济纳旗| 九台市| 南京市| 论坛| 若羌县| 隆化县| 大城县| 罗江县| 舞钢市| 襄汾县| 左贡县| 偃师市| 西城区| 龙门县| 新巴尔虎左旗| 怀来县| 嘉鱼县| 青川县| 阳新县|