如何使用vue路由

發布時間：2022-01-26 09:02:43 來源：億速云閱讀：127 作者：小新欄目：開發技術

小編給大家分享一下如何使用vue路由，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

概念

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

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

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

Vue Router

簡介

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

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

Vue Router的特性

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

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.配置路由規則并創建路由實例

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

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

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

補充：

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

在路由規則中添加一條路由規則即可，如

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