快捷導航

一篇文章帶你了解vue路由

更新時間：2022年01月25日 15:51:57 作者：幾何心涼

這篇文章主要為大家詳細介紹了vue的路由，路由的本質(zhì)就是一種對應(yīng)關(guān)系，比如說我們在url地址中輸入我們要訪問的url地址之后，瀏覽器要去請求這個url地址對應(yīng)的資源，本文具有一定的參考價值，感興趣的小伙伴們可以參考一下

概念

路由的本質(zhì)就是一種對應(yīng)關(guān)系，比如說我們在url地址中輸入我們要訪問的url地址之后，瀏覽器要去請求這個url地址對應(yīng)的資源。
那么url地址和真實的資源之間就有一種對應(yīng)的關(guān)系，就是路由。

路由分為前端路由和后端路由

1).后端路由是由服務(wù)器端進行實現(xiàn)，并完成資源的分發(fā)
后端路由性能相對前端路由來說較低，所以，我們接下來主要學習的是前端路由
2).前端路由是依靠hash值(錨鏈接)的變化進行實現(xiàn)
前端路由的基本概念：根據(jù)不同的事件來顯示不同的頁面內(nèi)容，即事件與事件處理函數(shù)之間的對應(yīng)關(guān)系
前端路由主要做的事情就是監(jiān)聽事件并分發(fā)執(zhí)行事件處理函數(shù)

Vue Router

簡介

它是一個Vue.js官方提供的路由管理器。是一個功能更加強大的前端路由器，推薦使用。
Vue Router和Vue.js非常契合，可以一起方便的實現(xiàn)SPA(single page web application,單頁應(yīng)用程序)應(yīng)用程序的開發(fā)。

Vue Router依賴于Vue，所以需要先引入Vue，再引入Vue Router

Vue Router的特性

支持H5歷史模式或者hash模式
支持嵌套路由
支持路由參數(shù)
支持編程式路由
支持命名路由
支持路由導航守衛(wèi)
支持路由過渡動畫特效
支持路由懶加載
支持路由滾動行為

Vue Router的使用步驟

1.導入js文件

<script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>

2.添加路由鏈接:是路由中提供的標簽，默認會被渲染為a標簽，to屬性默認被渲染為href屬性，to屬性的值會被渲染為#開頭的hash地址

<router-link to="/user">User</router-link>

3.添加路由填充位（路由占位符）

<router-view></router-view>

4.定義路由組件

var User = { template:"<div>This is User</div>" }

5.配置路由規(guī)則并創(chuàng)建路由實例

var myRouter = new VueRouter({
    //routes是路由規(guī)則數(shù)組
    routes:[
        //每一個路由規(guī)則都是一個對象，對象中至少包含path和component兩個屬性
        //path表示  路由匹配的hash地址，component表示路由規(guī)則對應(yīng)要展示的組件對象
        {path:"/user",component:User},
        {path:"/login",component:Login}
    ]
})

6.將路由掛載到Vue實例中

new Vue({    el:"#app",    //通過router屬性掛載路由對象    router:myRouter})new Vue({
    el:"#app",
    //通過router屬性掛載路由對象
    router:myRouter
})

補充：

路由重定向：可以通過路由重定向為頁面設(shè)置默認展示的組件

在路由規(guī)則中添加一條路由規(guī)則即可，如

var myRouter = new VueRouter({
    //routes是路由規(guī)則數(shù)組
    routes: [
        //path設(shè)置為/表示頁面最初始的地址 / ,redirect表示要被重定向的新地址，設(shè)置為一個路由即可
        { path:"/",redirect:"/user"},
        { path: "/user", component: User },
        { path: "/login", component: Login }
    ]
})