Vue-路由(一)

阿新 • • 發佈：2020-07-12

路由：路由是一個比較廣義和抽象的概念，其本質就是對應關係；它分為前端路由和後端路由；

　　後端路由：指根據不同的使用者URL請求，返回不同的內容；本質就是URL請求地址與伺服器資源之間的對應關係；

- 後端渲染(存在效能問題)
- Ajax前端渲染(前端渲染提高效能，但是不支援瀏覽器的前進後退操作)
- SPA(Single Page Application)單頁面應用程式：整個網站只有一個頁面，內容的變化通過Ajax區域性更新實現，同時支援瀏覽器位址列前進和後退操作；
- SPA實現原理之一：基於URL地址的hash(hash的變化會導致瀏覽器記錄訪問歷史的變化、但是hash的變化不會觸發新的URL請求)
- 在實現SPA過程中，最核心的技術點就是前端路由

　　前端路由：根據不同的使用者事件，顯示不同的頁面內容；本質就是使用者事件與事件處理函式之間的對應關係；

Vue Router：是vue.js官方的路由管理器(http://router.vuejs.org/zh/)；它和vue.js的核心深度整合，可以非常方便的用於SPA應用程式開發；

功能：支援HTML5歷史模式或hash模式、支援巢狀路由、支援路由引數、支援程式設計式路由、支援命名路由
基本使用步驟：引入相關庫檔案、新增路由連結、新增路由填充位、定義路由元件、配置路由規則並建立路由例項、把路由掛載到Vue根例項中；
- 引入相關庫檔案：

<!--先匯入vue檔案，為全域性window物件掛載vue建構函式-->
<script src=".lib/vue.js"></script>
<!--後匯入vue-router檔案，為全域性window物件掛載VueRouter建構函式-->
<script src="./lib/vue-router.js"></script>

- 新增路由連結：

<!--router-link是vue中提供的標籤，預設渲染為a標籤-->
<!--to屬性預設渲染為href屬性-->
<!--to屬性的值預設會被渲染為#開頭的hash地址 
-->
<router-link to="/user">User</router-link>
<router-link to="reqister">Reqister</touter-link>

- 新增路由填充位：

<!--路由填充位(也叫路由佔位符)-->
<!--將來通過路由規則匹配到的元件，將會被渲染到router-view所在的位置-->
<router-view></router-view>

- 定義路由元件：

var User = {
    template:'<div>User元件</div>'
}
var Register = {
    template:'<div>Register元件</div>'
}

- 配置路由規則並建立路由例項：

//建立路由例項物件
var router = new VueRouter({
    //routes是路由規則陣列
    routes:[
        //每個路由規則都是一個配置物件，其中至少包含path和component兩個屬性
        //path表示當前路由規則匹配的hash地址
        //component表示但錢路由規則對應要展示的元件，只接受元件物件，不接受字串
        {path:'/user',component:User},
        {path:'/register',component:Register}
    ]
})

- 把路由掛載到Vue根例項中：

var vm = new Vue({
    el:'#app',
    //為了能夠讓路由規則生效，必須把路由物件掛載到vue例項物件上
    //router:router
　　router
})

路由重定向：使用者在訪問地址A的時候，強制使用者跳轉到地址C，從而展示特定的元件頁面；

　　通過路由規則的redirect屬性，指定一個新的路由地址，可以很方便地設定路由地重定向：

var router = new VueRouter({
    routes:[
        //其中，path表示需要被重定向的原地址，redirect表示將要被重定向的新地址
        {path:'/',redirect:'/user'},
        {path:'/user',component:User},
        {path:'/register',component:Register}
    ]
})

巢狀路由：

功能：點選父級路由連結顯示模板內容、模板內容中又有子級路由連結、點選子集路由連結顯示子集模板內容
用法：
- 父路由元件模板：父級路由連結、父元件路由填充位

<p>
    <router-link to="/user">User</router-lilnk>
    <router-link to="/register">Register</router-link>
</p>
<div>
    <!--控制組件的顯示位置-->
    <router-view></router-view>
</div>

- 子路由模板：子級路由連結、子級路由填充位

const Register = {
    template:'<div>
                <h1>Register元件</h1>
                <hr>
                <router-link to="/register/tab1">Tab1</router-link>
                <router-link to="/register/tab2">Tab2</router-link>
                <!--子路由填充位置-->
                <router-view/>
        </div>',
}

- 巢狀路由配置：父級路由通過children屬性配置子級路由

const router = new VueRouter({
    routes:[
        {path:'/user',component:User},
        {
            path:'/register',
            component:Register,
            //通過children屬性，為/register新增子路由規則
            children:[
                    {path:'/register/tab1',component:Tab1},
                    {path:'/register/tab2',component:Tab2}
            ]
        }
    ]
})

動態路由：當路由規則匹配時是有規律的，可以採用動態路由匹配，節省程式碼量

var router = ner VueRouter({
    routes:[
        //動態路徑引數，以冒號開頭
        {path:'/user/:id,component:User}
    ]
})
const User = {
    //路由元件通過$route.params獲取路由引數
    template:'<div>User{{$route.params.id}}</div>'
}

$route與對應路由形成高度耦合，不夠靈活，所以可以使用props將元件和路由解耦

1.props的值為布林型別 const router new VueRouter({ routes:[ //如果props被設定為true，route.params將會被設定為元件屬性 {path:'/user/:id',component:User,props:true} ] }) const User = { props:['id'], //使用props接收路由引數 templata:'<div>User{{id}}</div>' //使用路由引數 }

2.props的值為物件型別
const router = new VueRouter({
    routes:[
        //如果porps是一個物件，它會被按原樣設定為元件屬性,此時id無法提供值
        {path:'/user/:id',component:User,props:{uname:'list',age:12}}
    ]
})
const User = {
    props:['uname','age'],
    template:'<div>使用者資訊：{{uname + '----' + age}}</div>'
}

3.props的值為函式型別
const router = new VueRouter({
    routes:[
        //如果porps是一個函式，它接收route物件為自己的形參
        {path:'/user/:id',component:User,
            props:route=>({umane:'zs',age:12,id:route.params.id})
        }}
    ]
})
const User = {
    props:['uname','age','id'],
    template:'<div>使用者資訊：{{uname + '----' + age + '----' + id}}</div>'
}

命名路由：為了更加方便的表示路由的路徑，可以給路由規則起一個別名，即為“命名路由”

const router = new VueRouter({
    routes:[
        {path:'/user/:id',
            name:'user',
            component:User
        }
    ]
})
<router-link :to="{name:'user',params:{id:123}}">User</router-link> //id須跟前面對應
router.push({name:'user',params:{id:123} })

宣告式導航：通過點選連結實現導航的方式；如a標籤、router-link標籤

程式設計式導航：通過呼叫JavaScript形式的API實現導航的方式；如location.href

//常用程式設計式導航API
this.$router.push('hash地址');
this.$router.go(n);  //-1為後退

router.push()方法的引數規則
//字串(路徑名字)
router.push('/home');
//物件
router.push({path:'/home'});
//命名的路由(傳遞引數)
router.push({name:'user',params:{userId:123} })
//帶查詢引數，變成/register?uname=list
router.push({path:'/register',query:{uname:'list'} })