? ? ? ? Vue Router是Vue項目開發(fā)中，重要的一環(huán)，在頁面模塊的模塊化，數(shù)據(jù)參數(shù)的傳遞，等方面具有重要的作用，Vue是單頁面應(yīng)用，通過路由控制頁面所展示的內(nèi)容，下面讓我們一起學(xué)習(xí)一下關(guān)于Vue Route的基礎(chǔ)用法，其中包含博主的整理總結(jié)。
一、什么是Vue Router
用 Vue + Vue Router 創(chuàng)建單頁應(yīng)用非常簡單：通過 Vue.js，我們已經(jīng)用組件組成了我們的應(yīng)用。當(dāng)加入 Vue Router 時，我們需要做的就是將我們的組件映射到路由上，讓 Vue Router 知道在哪里渲染它們
二、安裝Vue Router
一般在Vue-cli創(chuàng)建項目時，會進行Router的安裝
npm?
npm install vue-router@4yarn?
yarn add vue-router@4在main.js中引入Router，new Vue的時候?qū)outer掛載到Vue的實例上，從而在項目開發(fā)的過程中，我們可以通過Vue.$route去觸發(fā)Router的方法屬性?
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
代碼解析（純純干貨，哈哈哈）：首先，new的時候發(fā)生了什么，1.創(chuàng)建一個新對象2.將構(gòu)造函數(shù)的作用域賦值給這個函數(shù)，因此this也指向了這個新對象3.執(zhí)行構(gòu)造函數(shù)的代碼，為這個對象添加屬性，4.返回這個對象
new Vue：也是基于Vue創(chuàng)建了一個新的Vue對象，并對用于傳入的配置項和系統(tǒng)配置項進行合并，然后作用域賦值，然后給新對象添加屬性，@方法，生命周期，監(jiān)聽事件，計算屬性等，然后通過.$mount進行頁面掛載，其中，render就是一個渲染函數(shù)，而createElement就是創(chuàng)建節(jié)點，App就是一般情況下Vue的html根文件，所以這里實質(zhì)上就是將App這個html頁面進行了渲染，當(dāng)然在App頁面中又有掛載的路由組件，進而可以渲染各種掛載的路由組件，?
三、router-link與router-view
router-link：通過router-link而不使用常規(guī)的a標(biāo)簽，是因為通過router-link來創(chuàng)建連接，可以在不重新加載頁面的情況下更改 URL，處理 URL 的生成以及編碼。
router-view：將顯示與 url 對應(yīng)的組件。你可以把它放在任何地方，以適應(yīng)你的布局。
四、動態(tài)路由匹配
當(dāng)通過Vue cli創(chuàng)建項目的時候，勾選了Vue router 之后會創(chuàng)建router文件夾
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = new VueRouter({
routes
})
export default router
下面將基于此文件進行相關(guān)屬性的分析。
1.帶參數(shù)的動態(tài)路由匹配
路徑參數(shù)
{
path: '/:id',
name: 'home',
component: HomeView
},路徑參數(shù)?用冒號?:?表示。當(dāng)一個路由被匹配時，它的?params?的值將在每個組件中以?this.$route.params?的形式暴露出來。
這將表示/后面的值，將會作為參數(shù)傳遞給home組件，而不作為路徑進行頁面的跳轉(zhuǎn)。也就表示/a與/b跳轉(zhuǎn)到的都是home組件，不同的是傳遞過來的值不同。
參數(shù)的獲取：通過$route.params.id獲取路由傳遞過來的值
<div>{{ $route.params.id }}</div>2.響應(yīng)路由參數(shù)的變化
推薦通過路由守衛(wèi)進行對應(yīng)數(shù)據(jù)的處理
<template>
<div>{{ id }}</div>
</template>
<script>
export default {
data() {
return {
id: "",
};
},
created() {},
//路由守衛(wèi)處理數(shù)據(jù)
beforeRouteEnter(to, from, next) {
next((vn) => {
vn.id = to.params.id;
});
},
};
</script>
<style>
</style>3.設(shè)置404頁面
通過*匹配所有未知路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
{
path: "/404",
component: () => import("@/views/404"),
},
{ path: "*", redirect: "/404" }
]
const router = new VueRouter({
mode:"history",
routes
})
export default router
五、路由的匹配語法
可以通過正則對路由進行匹配。
通過?修飾符將一個參數(shù)標(biāo)記為可選的
下列代碼可以匹配到/about路由
path: '/about/:id?',?下列代碼無法匹配到/about路由
path: '/about/:id',六、編程式導(dǎo)航
除了使用 <router-link> 創(chuàng)建 a 標(biāo)簽來定義導(dǎo)航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現(xiàn)。其中router-link是聲明式導(dǎo)航，通過router的實例方法稱為編程式導(dǎo)航。
1.導(dǎo)航到不同的位置
在Vue中可以直接訪問$router實例，所以可以直接調(diào)用實例的方法，實現(xiàn)頁面的跳轉(zhuǎn)。想要導(dǎo)航到不同的 URL，可以使用?router.push?方法。這個方法會向 history 棧添加一個新的記錄，所以，當(dāng)用戶點擊瀏覽器后退按鈕時，會回到之前的 URL。
當(dāng)你點擊router-link時，內(nèi)部會調(diào)用push這個方法。
| 聲明式 | 編程式 |
|---|---|
<router-link :to="..."> |
router.push(...) |
該方法的參數(shù)可以是一個字符串路徑，或者一個描述地址的對象。例如：
// 字符串路徑
router.push('/users/eduardo')
// 帶有路徑的對象
router.push({ path: '/users/eduardo' })
// 命名的路由，并加上參數(shù)，讓路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })
// 帶查詢參數(shù)，結(jié)果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })
// 帶 hash，結(jié)果是 /about#team
router.push({ path: '/about', hash: '#team' })需要注意的是：如果提供了?path，params?會被忽略，上述例子中的?query?并不屬于這種情況。
如果想要在提供path的方式上傳遞params，需要提供路由的?name?或手寫完整的帶有參數(shù)的?path：
const username = 'eduardo'
// 我們可以手動建立 url，但我們必須自己處理編碼
router.push(`/user/${username}`) // -> /user/eduardo
// 同樣
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的話，使用 `name` 和 `params` 從自動 URL 編碼中獲益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能與 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user2.替換當(dāng)前位置
它的作用類似于?router.push，唯一不同的是，它在導(dǎo)航時不會向 history 添加新記錄，正如它的名字所暗示的那樣——它取代了當(dāng)前的條目。
| 聲明式 | 編程式 |
|---|---|
<router-link :to="..." replace> |
router.replace(...) |
也可以直接在傳遞給?router.push?的?routeLocation?中增加一個屬性?replace: true?：
router.push({ path: '/home', replace: true })
// 相當(dāng)于
router.replace({ path: '/home' })?3.橫跨歷史，獨斷萬古
可以通過.go()接收一個數(shù)字，指定前進后退幾層。
為正數(shù)表示前進，負(fù)數(shù)表示后退。
4.路由命名
可以通過name屬性指定路由名稱，通過name屬性進行傳參以及跳轉(zhuǎn)。
5.命名視圖
可以通過多個router-view指定多個組件的展示，通過name標(biāo)志顯示那個組件。
<template>
<h1>Named Views</h1>
<ul>
<li>
<router-link to="/">First page</router-link>
</li>
<li>
<router-link to="/other">Second page</router-link>
</li>
</ul>
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
</template>
<script>
export default {
name: "App",
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
.router-link-active {
color: orange;
}
.router-link-exact-active {
color: crimson;
}
</style>
<style scoped>
ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
li:not(:last-of-type) {
margin-right: 1rem;
}
</style>import { createRouter, createWebHistory } from 'vue-router'
import First from './views/First.vue'
import Second from './views/Second.vue'
import Third from './views/Third.vue'
export const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
// a single route can define multiple named components
// which will be rendered into <router-view>s with corresponding names.
components: {
default: First,
a: Second,
b: Third,
},
},
{
path: '/other',
components: {
default: Third,
a: Second,
b: First,
},
},
],
})
七、路由重定向與別名
通過redirect屬性進行路由重定向
之前在進行404頁面配置的時候，其實已經(jīng)進行過路由的重定向了。
{
path: "/404",
component: () => import("@/views/404"),
},
{ path: "*", redirect: "/404" }通過alias進行路由的別名。
當(dāng)我們訪問別名時的路由時，實際上訪問的仍是當(dāng)前路由。
重定向是指當(dāng)用戶訪問?/home?時，URL 會被?/?替換，然后匹配成?/。那么什么是別名呢？
將?/?別名為?/home，意味著當(dāng)用戶訪問?/home?時，URL 仍然是?/home，但會被匹配為用戶正在訪問?/。文章來源：http://www.zghlxwxcb.cn/news/detail-480250.html
上面對應(yīng)的路由配置為：文章來源地址http://www.zghlxwxcb.cn/news/detail-480250.html
const routes = [{ path: '/', component: Homepage, alias: '/home' }]到了這里，關(guān)于Vue Router的詳細(xì)解讀之手把手教學(xué)篇（一）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
