Vue-router前端路由(1)
Vue-router前端路由(1)
什麼是路由？
路由就是通過互聯的網路把資訊從源地址傳送到目的地址的活動
路由提供了兩種機制：路由和傳送
- 路由是決定資料包從來元到目的地的路徑
- 傳送將輸入端的資料轉移到合適的輸出端
路由中有一個非常重要的概念叫路由表：
- 路由表本質上就是一個對映表，決定了資料包的指向
網站的發展階段：
後端路由階段：
早期的網站開發整個HTML頁面是由後端伺服器來渲染的
- 伺服器直接產生渲染好的HTML頁面，返回給客戶端進行展示
但是，一個網站這麼多頁面伺服器應該如何處理呢？
- 一個頁面有自己對應的網址，也就是URL
- URL會發送到伺服器，伺服器會通過正則對該URL進行匹配。並且最後交給一個Controller進行處理
- Controller進行各種處理，最終生成HTML或者資料，返回給前端
- 這就完成了一個IO操作
後端路由的缺點：
- 一種情況是整個頁面的模組都是由後端人員來編寫和維護的
- 另一種情況就是前端開發人員如果要開發頁面，需要通過PHP和Java等語言來編寫頁面程式碼
- 而通常情況下HTML程式碼和資料以及對應的邏輯會混在一起，編寫和維護起來都是件很糟糕的事情
前後端分離階段：
- 隨著Ajax的出現，有了前後端分離的開發模式
- 後端只提供API來返回資料，前端通過Ajax來獲取資料，並且可以通過JavaScript將資料渲染到頁面中
- 這樣做的最大優點就是後端負責的清晰，後端專注於資料上，前端專注於互動和視覺化上
- 並且當移動端出現後，後端不需要進行任何處理，依然使用之前的一套API即可
單頁面富應用階段（前端路由）：
- 其實SPA最主要的特點就是在前後端分離的基礎上加了一層前端路由
- 也就是前端來維護一套路由規則
Vue-router外掛：
當然我i們的重點是Vue-router：
- vue-router是Vue.js官網的路由外掛，它和Vue.js是深度整合的，適合用於構建單頁面應用
vue-router是基於路由和元件的
- 路由用於設定訪問路徑，將路徑和元件對映起來
- 在vue-router的單頁面應用中，頁面的路徑的改變實際上就是元件的切換
安裝和使用vue-router：
步驟一：安裝vue-router
npm install vue-router --save
步驟二：在模組化工程中使用它（因為是一個外掛，所以可以通過Vue.use()來安裝路由功能）
- 第一步：匯入路由物件，並呼叫Vue.use(VueRouter)
- 第二步：建立路由例項，並且傳入路由對映配置
- 第三步：在Vue例項中掛載建立的路由例項
使用vue-router的步驟
- 第一步：建立路由元件
- 第二步：配置路由對映：元件和路徑的對映關係
- 第三步：使用路由通過
和
Url的hash和history
-
Url的hash
- url的hash也就是錨點（#），本質上是改變window.location的href屬性
- 我峨嵋你可以通過直接複製location.hash來改變href，但是頁面不發生重新整理
-
HTML5的history模式：pushState()
HTML5的history.pushState()非常類似個棧結構,沒pushState({},,'XXX')一次，就類似於往棧例壓入一個路徑，用back()返回上一個路徑。
如果希望當前頁面改變路徑後無法返回，可以用replaceState()
vue-router路由器的重定向
const routes = [
{ path: '/',
//重定向
redirect: '/home'
}
]
修改為HTML history模式
const router = new VueRouter({
routes,
mode: 'history'
});
router-link其他屬性的補充：
-
tag:tag可以指定
之後渲染什麼元件，比如下面的程式碼會被渲染成一個 - 元素而不是
首頁 - 元素而不是
-
.router-link-exact-active class類：在router-link被點選後切換的樣式
-
linkActiveClass:當
對應的路由匹配成功時，會自動給當前元素設定一個router-link-active的class，設定linkActiveClass可以修改預設名字 - 一般在進行高亮顯示或者底部tabber會用到此類。
- 但是通常不會修改類的屬性，會直接使用預設的router-link-active
通過程式碼格式跳轉路由：
使用this.$router.push('跳轉路由')
<script>
export default {
name: "App",
methods: {
homeClick(){
//通過程式碼的方式修改vue-router
this.$router.push('/home')
console.log('homeclick')
},
aboutClick(){
this.$router.push('/about')
console.log('aboutclick')
}
}
}
</script>
動態路由的使用：
-
通過動態繫結：v-bind的方法，路由跳轉的時候在路徑上拼接上Id
路由配置：
route:[
{
path: "/user/:id",
component: User
}
]
渲染介面路由的動態繫結：（用字串拼接方法填寫路徑）
<router-link :to="'/user/'+id">使用者</router-link>
現在有一個需求，如果渲染介面的路由跳轉到使用者介面並在路徑顯示了渲染介面裡的id資料，那麼渲染元件中如何再在介面上返回我們需要的在渲染介面下的使用者id資料呢？
$router:獲取當前整個路由物件
$route：獲取當前活躍路由（介面顯示的元件對應的路由）
在User元件下定義computed獲取當前活躍路由獲取到的id引數：
<template>
<div>
<h2>我是使用者介面</h2>
<p>我是使用者介面內容</p>
<p>userId: {{userId}}</p>
<!--<p>{{$route.params.id}}</p>-->
</div>
</template>
<script>
export default {
name: "User",
computed: {
userId(){
return this.$route.params.id
}
}
}
</script>
Vue-router懶載入的使用
- 路由懶載入的主要作用就是將路由對應的元件打包成一個個的js程式碼塊
- 只有在這個路由被訪問到的時候，才載入對應的元件
const Home = () => import("../components/Home.vue");
const About = () => import("../components/About.vue");
const User = () => import("../components/User.vue");
Vue.use(VueRouter);
const routes = [
{ path: '/',
//重定向,頁面初始定位到Home元件
redirect: '/home'
},
{
path: "/home",
component: Home
},
{
path: "/about",
component: About
},
{
path: "/user/:id",
component: User
}
];
Vue-router路由的巢狀:
巢狀路由是一個很常見的功能：
- 比如在home頁面中，我們希望通過home/news和/home/message訪問一些內容
- 一個路由對映一個元件，訪問這兩個路徑也會分別渲染兩個元件
實現巢狀路由有兩個步驟：
- 建立對應的子元件，並且在路由對映中配置對應的子路由
- 在元件內部使用
標籤
Vue-router引數傳遞：
引數傳遞主要有兩種型別：
- params型別：
- 配置路由格式：/route/：id
- 傳遞的方式：在path後面接上對應的值
- 傳遞後形成的路徑：/route/123 /route/abc
路由顯示裡傳參方式：
<!--id為當前元件下資料-->
<router-link :to="'/user/'+id">使用者</router-link>
路由對映元件內獲取資料：
<p>userId: {{$route.params.id}}</p>
URL => 協議：//主機：埠/路徑?查詢
scheme://host:port/path?query#fragment
- query型別：
- 配置路由格式：/route，也就是普通配置
- 傳遞的方式：物件中使用query的key作為傳遞方式
- 傳遞後形成的路徑：/route？id=123, /route？id=abc
路由顯示裡傳參方式：
<router-link :to="{ path:'/profile', query:{name: '豆豆', height: '180', age: '21'}}">
路由對映元件內獲取資料：
<p>姓名:{{$route.query.name}}</p>