一坑雅、前端路由和后端路由概念解釋
- 后端路由：對(duì)于普通的網(wǎng)站翠订，所有的超鏈接都是url地址婚夫，所有url都對(duì)應(yīng)服務(wù)器上對(duì)應(yīng)的資源
- 前端路由：對(duì)于單頁(yè)面應(yīng)用程序來說，主要通過url的hash（#）來實(shí)現(xiàn)不同頁(yè)面的切換程帕，同時(shí)hash還有一個(gè)特點(diǎn)HTTP請(qǐng)求 中不會(huì)包含hash相關(guān)的內(nèi)容，所以單頁(yè)面程序中的頁(yè)面跳轉(zhuǎn)主要用hash實(shí)現(xiàn)
- 在單頁(yè)面應(yīng)用程序中這種通過hash來改變頁(yè)面的方式稱作前端路由區(qū)別于后端路由
二地啰、路由的基本使用方式
1.創(chuàng)建一個(gè)路由對(duì)象愁拭，當(dāng)導(dǎo)入vue-router包之后，在window全局對(duì)象中就有一個(gè)路由的構(gòu)造函數(shù)VueRouter
2.在new路由對(duì)象的時(shí)候可以傳遞一個(gè)配置對(duì)象亏吝，這個(gè)配置對(duì)象的route表示路由器的匹配規(guī)則
3.每個(gè)路由規(guī)則都是一個(gè)對(duì)象岭埠，這個(gè)規(guī)則對(duì)象身上必須有兩個(gè)屬性
A:屬性1 path 表示監(jiān)聽哪個(gè)路由鏈接地址
B:屬性2 component，表示如果路由是前面匹配到的path，則展示component屬性對(duì)應(yīng)的組件惜论，component屬性值必須是一個(gè)組件模板對(duì)象许赃，不能是組件的引用名稱
三、常見引入路由組件的方式和區(qū)別
// 第一種
import Home from './../views/Home.vue'
{
path: '/',
component: Home
},
// 第二種
{
path: '/about',
component: () => import('./../views/About.vue')
}
// 區(qū)別: 第二種方式起到懶加載作用(不調(diào)用不訪問)
四馆类、常見引入路由分類
1.動(dòng)態(tài)路由
// 動(dòng)態(tài)路由
{
path: '/argument/:name',
component: () => import('../views/Argument.vue')
}
// 獲取動(dòng)態(tài)路由的參數(shù)
// {{ $route.params.name }} 注意:$route：當(dāng)前加載頁(yè)面的路由對(duì)象
2.嵌套路由
// 嵌套路由
{
path: '/parent',
component: () => import('../views/Argument.vue'),
children: [
{
// 子嵌套路由會(huì)自動(dòng)補(bǔ)全 "/"图焰，所以不需要添加斜線
path: 'child',
component: () => import('@/views/Child.vue')
}
]
}
3.命名路由與別名
{
path: '/',
name: 'home',
alias: 'home_page',
component: Home
}
alias:別名，指的是home_page和home這兩個(gè)名字指向的是同一個(gè)頁(yè)面
name:命名路由
<!-- 路徑方式 -->
<router-link to="/">Home</router-link>
<!-- 命名路由的方法蹦掐，此方法必須給路由命名(注意:name屬性給值) -->
<router-link :to="{ name: 'about' }">About</router-link>
或者
<router-link v-bind:to="{ name: 'about' }">About</router-link>
簡(jiǎn)寫方式(v-bind 簡(jiǎn)寫)
<router-link :to="about">About</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 帶查詢參數(shù)技羔，下面的結(jié)果為 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
4.命名視圖
<!-- 默認(rèn)的是default -->
<router-view />
<router-view name="email"/>
{
path: '/named_view',
components: {
default: () => import("@/views/Child.vue"),
email: () => import("@/views/Email.vue")
}
}
5.Vue路由重定向
{
path: '/main',
name: 'home',
redirect: {
name: 'home'
},
redirect: to => {
return {
name: 'home'
}
}
}
