詳解vue-router路由與頁間導航

vue-router是Vue.js官方的路由插件，它和vue.js是深度整合的，適合用於建立單一頁面應用程式。 vue的單一頁面應用程式是基於路由和元件的，路由用於設定存取路徑，並將路徑和元件對應起來。傳統的頁面應用，是用一些超連結來實現頁面切換和跳轉的。在vue-router單一頁面應用程式中，則是路徑之間的切換，也就是元件的切換。

vue-router

我們知道路由定義了一系列存取的位址規則，路由引擎會根據這些規則來配對找到對應的處理頁面，然後將請求轉發給頁進行處理。可以說所有的後端開發都是這樣做的，而前端路由是不存在"請求"一說的。

前端路由是找到地址匹配的一個元件或物件將其渲染出來。改變瀏覽器位址不向伺服器發送請求有兩種方法，

一是在地址中加入#以欺騙瀏覽器，地址的改變是由於正在進行頁內導航；二是使用HTML5的window. history功能，使用URL的hash來模擬一個完整的URL。

vue-router是一套專用的路由工具庫，是vue的一個插件，我們需要在全域參考中透過vue.use()將它引入vue實例中，

使用vue-cli建立專案後（init初始化時vue-router確認y）

我們先來看看專案src的結構，透過cmd進入項目src目錄下，執行 tree -f > list.txt 產生結構樹（儲存在list.txt中）：

結構如下：

src
├─assets // 静态资源
│ └─image // 图片
│  
├─components // 组件 
│ └─HelloWorld
│  HelloWorld.vue
│  
└─router // 路由配置
│ └─index.js
│ 
│ App.vue // 默认程序入口
│ main.js
│

1、開啟main.js:

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router, 
 render: h => h(App)　
})

第10行將設定的路由綁定到vue實例上，第11行在vue實例中使用render方法來繪製這個vue元件(App)完成初始化

Render是vue2新增的具有特色的方法，為了得到更好的運行速度，vue2也採用的類似react的Virtual Dom（虛擬Dom）

 2、然後我們在components中註冊幾個元件

3、開啟router/index.js設定路由

import Vue from 'vue'
import Router from 'vue-router'
import Singer from '@/components/rank/rank'
Vue.use(Router) // 注册router
export default new Router({
 routes: [
 {
 path: '/',
 name: 'Hello',
 component: MHeader // 路由中指定组件
 },
 {
 path: '/rank',
 name: 'rank',
 component: Rank
 }
 ]
})

路由的模式

關鍵字："mode"，"history模式"，"hash模式"，"Abstract模式"

我們可以在建立的Router中使用模式，如參數mode:history的參數，這個值意思是使用history模式，這種模式充分利用了history.pushState API來完成URL的跳轉而無需重新載入頁面，

如果不使用history模式，當造訪rank的時候路由就會變成：

http://localhost/#rank

#反之為：

#http://localhost/rank

這就是history模式和hash模式的區別，除此之外還有一種abstract模式

• Hash：使用URL hash值作為路由，

• History：依賴HTML5 History API和伺服器設定

• Abstract：支援所有JavaScript運行環境，如node伺服器端。如果發現沒有瀏覽器的API，路由就會強制進入這個模式

#路由與導航

關鍵字："router-link" , "router-view"

vue-router提供兩個指令標籤元件來處理這個導航與自動渲染邏輯：

——渲染路徑匹配到的元件視圖，

——支援使用者在具有路由功能的應用中導航

###我們使用整兩個標籤元件來完成一個簡單的頁面佈局：################在路由使用時要明確一個原則就是：###不直接引用路由定義###，（即不要在router-link直接透過to='conpontents/rank/rank' 來導向路由），當明確引用路由定義的URL一旦發生變化，所有引用的地方都要修改。 ######在router-link透過名稱引用路由：向to屬性傳入一個物件明確的宣告路由的名稱：############這裡留意使用v-bind綁定（簡寫：），因為這裡需要傳遞給router-link的是一個物件{ name:'rank' }而不是一個字串## ##########動態路由###############關鍵字："動態路由參數"，"params"，"$router.params"#### ##

vue-router将参数融入到路由的路径定义之内成为路由的一部分，我们称这种参数为"动态路径参数"；

使用非常简单，在参数名之前加上":"，然后将参数写在路由定义的path内，

 routers：[{
 name:'BookDetails',
 path:'books/:id',
 component:BookDetails 
 }]

1、这样定义之后，vue-router就会自动匹配/books/1、/books/2、...、/books/n 形式的路由模式，因为这样定义的路由的数量是不确定的，所以也称为"动态路由"。

2、在中我们就可以加入一个params的属性来指定具体的参数值：

 <router-link :to="{ name:&#39;BookDetails&#39;，params:{ id:1 } }">
  //...
 </router-link>

3、当我们导航进入图书详情页之后，我们可能需要获取属性指定的参数值（即重新将:id参数读取出来），我们可以通过$router.params来完成：

 export default {
 created () {
  const bookID = this.$router.params.id
 }
 }

嵌套式路由

关键词："children"，

我们利用下面的场景，首页/home/读书详情 页面，读书详情也我们不需要底部的导航区域，但是我们使用之前的路由定义，所有的页面都应该具有想用的底部导航条，按前面的路由结构是不可以导航到图书详情页的，如下：

所以我们就需要另一种定义路由的方式，对前面的路由进行调整，

嵌套式路由又叫做子路由，要将路由显示到子视图中就要相应的子路由与之对应，我们只需要在路由定义中使用children数组属性就可以定义子路由了：

routers:[
 { 
  name:'Main',
  path:'/',
  component:Main,
  children:[
  { name:'Home',path:'home',component:Home }
  { name:'Me',path:'me',component:Me }
  ] 
 },
 { name:'BookDetail',path:'/books/:id',component:BookDetail } 
]

需要注意的是以"/"开头的嵌套路径会被当做根路径，所以不要在子路由上加上"/"；

重定向路由与别名

关键词："redirect"，"alias"

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

 routes: [
 { path: '/a', redirect: '/b' }
 ]
// 重定向的目标也可以是一个命名的路由
 routes: [
 { path: '/a', redirect: { name: 'foo' }}
 ]

另外我们需要区别重定向和别名，『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么『别名』又是什么呢？

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样：

利用alias给路由设置别名

 routes: [
 { path: '/a', component: A, alias: '/b' }
 ]

总结

到这里vue路由的基础我们已经总结完毕，我们需要在实战中不断练习，多多的去解决问题，方能更好的使用路由 帮我们完成任务，同时为vue进阶的路由知识打基础。

相关推荐：

vue-router路由参数刷新消失的问题解决方法详解

vue-router路由参数刷新消失改怎么办？

vue-router单页面路由详解

以上是詳解vue-router路由與頁間導航的詳細內容。更多資訊請關注PHP中文網其他相關文章！