Vue.js學習第十一天——vue中的路由基本使用
一. 概念相關
-
什麼是路由
路由就是通過互聯的網絡把信息從源地址傳輸到目的地址的活動(維基百科)
路由器提供了兩種機制，路由和轉送
-
路由：路由是決定數據包從來源到目的地的途徑
-
轉送：轉送是將輸入端的數據轉移到合適的輸出端
路由表：本質上就是一個映射表，決定了數據包的指向
-
-
什麼是前端渲染、前端路由、後端渲染、後端路由
在網站開發早期階段（後端路由階段），整個html頁面是由服務器來渲染的，並返回給客戶端進行展示，這種由服務器完成網址與對應頁面的映射叫做後端路由，當然缺點也是非常明顯的，後端人員需要負責整個頁面的開發，對前端開發人員要求高，html代碼和數據混合在一起都非常糟糕，到了網站開發的中期（前後端分離階段），隨着Ajax技術的出現，有了前後端分離的開發模式，後端專注於數據的處理，而前端專注頁面的交互和可視化上，目前很多的網站依然採用這種模式，到目前的一部分公司已經到了單頁面富應用階段（SPA），也就是在前後端分離的基礎上加了一層前端路由，也就是前端來維護一套路由規則。
二. 如何改變URL並使頁面不刷新
-
hash
vue-router默認的使用方式，地址欄會有一個#號，在瀏覽器中可以使用
location.hash = 'home'來觀察其模式，使用這個模式可以實現 -
HTML5的history模式（地址欄不會出現# 所以較多使用）
history.pushState({},'','home')它採用的是棧結構，可以記錄我們瀏覽的歷史，我們可以用前進和後退的方式對頁面進行訪問。history.replaceState({},'','home')和第一個pushState模式不同的是他不能使用我們的前進和後退對我們的頁面進行訪問history.go(-1)棧中彈出一個地址history.back此方法等價於history.go(-1)history.forward此方法等價於history.go(1)
三.vue-router安裝和配置方式
-
概念
Vue中的route是基於路由和組件的，路由用於設定訪問路徑，將路徑和組件映射起來，在vue-router的單頁面富應用中，頁面的路徑的改變就是組件的切換
-
安裝：
npm install vue-router --save -
使用：
-
- 導入路由對象，並且調用
Vue.use(插件)安裝插件 - 創建路由實例，並且傳入路由映射配置
2.1. 創建路由組件
2.2. 配置路由映射，即組件和路徑的映射關係
2.3. 使用路由，通過router-link和router-view標籤 - 在Vue實例中掛在創建的路由實例
下面是完整的vue-router代碼 router文件夾下的index.js
import VueRouter from 'vue-router' import Vue from 'vue' import index from '../components/index.vue' import about from '../components/about.vue' // 1.導入路由對象 安裝插件 Vue.use(VueRouter) // 2.創建路由實例，並且傳入路由映射配置 const routes = [ { path:'', redirect: '/home' }, { path: '/home', component: index }, { path: '/about', component: about } ] const router = new VueRouter({ routes, // mode: 'history', // linkActiveClass: 'active' }) // 3.在Vue實例中掛載創建的路由實例 export default routerApp.vue代碼：
<template> <div id="app"> <router-link to="/home">首頁</router-link> <router-link to="/about">關於</router-link> <router-view></router-view> </div> </template> <script> export default { name: 'App', } </script> <style> </style>components文件夾下的about.vue組件
<template> <div> <p>我是關於組件嗷 別認錯了</p> </div> </template> <script> export default { name: 'about' } </script> <style> </style>components文件夾下的index.vue組件
<template> <div> <p>我是首頁組件嗷</p> </div> </template> <script> export default { name: 'index' } </script> <style> </style>main.js文件
import Vue from 'vue' import App from './App' import routes from './router/index.js' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router:routes, render: h => h(App) })注意：這裏面有一個坑，在創建路由實例的時候，讓我們傳入路由映射配置時，這裏我寫的是
routes，倘若你想叫其他名字，就必須寫成routes: 你的名字。否則就必須定義爲routes，main.js中掛載實例的時候也同理，簡寫可以直接寫router,如果你要自己命名，就必須寫成router: 你的名字，千萬要注意! - 導入路由對象，並且調用
-
一些參數的問題
-
在vue-router中，可以添加一個默認的路徑，比如開發過程中我們需要用戶已進入我們的網頁首先就跳轉到某一個頁面時，就需要我們添加一個默認的路徑,這時你需要再配置一個映射關係，代碼如下：
const routes = [ { path:'', //此處不寫就代表一個默認路徑，或者只寫一個/ redirect: '/home' //此處指默認路徑重定向的路徑 }, { path: '/home', component: index }, { path: '/about', component: about } ] -
在vue-router的默認配置中是使用hash模式的，我們可以將它修改爲history模式，只需要在創建實例的時候再傳入一個參數，如下：
const router = new VueRouter({ routes, mode: 'history', //將模式修改爲history // linkActiveClass: 'active' }) -
router-link的其它屬性
-
tag：可以指定router-link之後在頁面上不被渲染成a標籤，可以指定渲染成按鈕等其它標籤
<router-link to='/about' tag="button">關於</router-link> -
replace: 不會留下history記錄，也就是不能使用前進後退鍵跳轉頁面
<router-link to='/about' replace>關於</router-link> -
active-class: 當我們選中標籤時，默認會將此標籤新增一個router-link-active樣式，我們可以重新命名這個樣式，只需要使用這個屬性(以下這個案例就被修改爲active)
<router-link to='/home' active-class='active'>首頁</router-link>當我們需要修改多個名稱時，不必每一個都這樣修改，可以直接在創建實例的時候傳入一個屬性，如下：
const router = new VueRouter({ routes, mode: 'history', linkActiveClass: 'active' })
-
-
-
通過代碼跳轉頁面
有時候我們沒有在模板中定義router-link這個標籤，我們可以使用通過代碼跳轉頁面的方式進行，比如我們定義的是button標籤，這時候我們只要監聽button的點擊事件，並在事件中使用$router屬性即可實現頁面跳轉，此屬性是vue-router給每一個組件中都會默認添加的屬性，使用代碼如下：
<template> <div id="app"> <router-link to="/home">首頁</router-link> <router-link to="/about">關於</router-link> <router-view></router-view> </div> </template> <script> export default { name: 'App', methods: { clickHome(){ this.$router.push('/home'); // this.$router.replace('/home'); console.log('aa'); }, clickAbout(){ this.$router.push('/about'); // this.$router.replace('/about'); console.log('bb'); } }, } </script> <style> </style>同樣的我們也可以使用replace等方法進行控制頁面跳轉。