1. 路由和路由器
- 路由是一組對應(yīng)關(guān)系,即一組 key - value的對應(yīng)關(guān)系, 路由器是管理路由的召锈,多個路由由路由器管理。
- key 為路徑,value 為function或者 component
- route -- 路由
- router -- 路由器
1.1 路由的功能
是為了實現(xiàn) SPA(single page application)單頁面應(yīng)用拐袜。相對于多頁面應(yīng)用吉嚣,頁面跳轉(zhuǎn)是通過 實現(xiàn)的,但是單頁面實現(xiàn)內(nèi)容跳轉(zhuǎn)就需要使用路由的功能去管理組件的顯示或者銷毀蹬铺。
1.2 SPA 單頁應(yīng)用的理解
- 單頁應(yīng)用整個只有一個頁面
- 點擊頁面的導(dǎo)航鏈接尝哆,頁面不會刷新,頁面只會做局部刷新甜攀;
- 數(shù)據(jù)需要通過 ajax 請求獲取到
1.3 路由的分類
前端路由
理解:value 是component秋泄,用于展示頁面的內(nèi)容
工作過程:當(dāng)瀏覽器的路徑發(fā)生變化的時候,對應(yīng)組件就會顯示后端路由
理解:value 是 function规阀,用于處理用戶提交的請求印衔;
工作過程:服務(wù)器接收到一個請求時,根據(jù)請求路徑找到匹配的函數(shù)來處理請求姥敛,返回響應(yīng)數(shù)據(jù)奸焙。
2. vue-router-基本路由
vue-router 是vue的一個插件,專門用來實現(xiàn)SPA 應(yīng)用的彤敛。
既然是 vue 插件与帆,那么在使用的時候需要先引入,然后再使用·Vue.use()
2.1 安裝 vue-router
, 命令 npm i vue-router
2.2 應(yīng)用插件:Vue.use(VueRouter)
2.3 編寫 router
配置項
//在 src 下面創(chuàng)建一個router 文件墨榄,然后再創(chuàng)建一個index.js 文件
//該文件用來創(chuàng)建整個應(yīng)用的路由器
import VueRouter from 'vue-router'
//引入組件
import Home from '../components/Home'
import About from '../components/About'
//創(chuàng)建 vue-router 的實例對象
const router = new VueRouter({
routes:[
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
},
]
})
export default router
2.4 實現(xiàn)切換需要使用router-link
標簽
<router-link to="/home">Home</router-link><br>
<router-link to="/about">About</router-link>
2.5 在需要顯示不同組件的地方需要放置一個標簽 router-view
<div>
<router-view></router-view>
</div>
//main.js
import Vue from 'vue'
// 引入APP組件玄糟,APP組件是整個項目的父組件
import App from './App.vue'
//引入 vue-router
import VueRouter from 'vue-router'
//引入已經(jīng)配置好的路由器
import router from './router'
//關(guān)閉vue生產(chǎn)提示
Vue.config.productionTip = false
//應(yīng)用插件
Vue.use(VueRouter)
// 創(chuàng)建vue實例對象 -- vm
new Vue({
render: h => h(App),
router:router
}).$mount('#app')
3. 幾個注意點
- 路由組件通常放在
pages
文件夾下面,一般組件放在components
文件夾 - 通過切換袄秩,隱藏了的路由組件阵翎,默認是被銷毀的。需要的時候再去掛載
- 每個組件都有自己的
$route
屬性之剧,里面存儲著自己的路由信息 - 整個應(yīng)用只有一個
router
, 可以通過組件的$router
屬性獲取到
4. 嵌套路由(多級路由)
4.1 配置規(guī)則:使用 children 配置項
//該文件用來創(chuàng)建整個應(yīng)用的路由器
import VueRouter from 'vue-router'
//引入組件
import Home from '../components/Home'
import About from '../components/About'
import News from '../components/News'
import Message from '../components/Message'
//創(chuàng)建 vue-router 的實例對象
const router = new VueRouter({
routes:[
{
path: '/home',
component: Home
},
{
path: '/about',
component: About,
children: [ //通過children配置子路由
{
path: "news", //此處不要寫分割線/
component: News
},
{
path: "message", //此處不要寫分割線/
component: Message
},
]
},
]
})
export default router
5. 路由的 query 傳參
5.1 傳遞參數(shù)
<!--跳轉(zhuǎn)并攜帶 query 參數(shù)郭卫,to 的字符串寫法-->
<router-link :to="/home/message/details?id=666&title=你好"> 跳轉(zhuǎn) </router-link>
//如果是動態(tài)的拿到 id 和 title 數(shù)據(jù),需要這樣寫
<router-link :to="'/home/message/details?id={m.id}&title={m.title}'"> 跳轉(zhuǎn) </router-link>
<!--跳轉(zhuǎn)并攜帶 query 參數(shù)背稼,to對象寫法-->
<router-link
:to = ‘{
path: '/home/message/details',
query : {
id : m.id,
title :m.title
}
}’
>跳轉(zhuǎn)
</router-link>
5.2 接收參數(shù)
$route.query.id
$route.query.title