詳解Vue-Router的安裝與使用
安裝
1.在已有Vue項(xiàng)目中手動(dòng)安裝vue-router
npm install --save vue-router
2.使用vue-cli創(chuàng)建自帶vue-router的新項(xiàng)目
空格選擇/取消 a全選 i反選
vue create project_name #Vue 會(huì)詢問(wèn)你使用哪種配置 Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) Manually select features #請(qǐng)選擇 Manually select features,Vue會(huì)詢問(wèn)你當(dāng)前項(xiàng)目需要哪些配置 Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Choose Vue version (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support ( ) Router ( ) Vuex ( ) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing #請(qǐng)將Router 選中,后面一系列的詢問(wèn)按照實(shí)際情況進(jìn)行選擇就好
路由的基礎(chǔ)配置
- 如果選擇了第一種安裝方式(手動(dòng)安裝),需要手動(dòng)在src文件夾下新建一個(gè)名為router的文件夾并新建index.js文件
- 如果選擇了第二種安裝方式(自定義安裝),不用自己進(jìn)行配置,新建項(xiàng)目完畢后就可以直接使用了
將Router安裝到Vue中
如果需要讓當(dāng)前Vue實(shí)例支持路由功能.需要在Vue實(shí)例化時(shí)將VueRouter的實(shí)例對(duì)象注入到Vue實(shí)例配置選項(xiàng)router中。(手動(dòng)安裝)
// src/router/index.js import Vue from 'vue' // 引入Vue import VueRouter from 'vue-router' // 引入VueRouter // Vue支持VueRouter Vue.use(VueRouter) let router = new VueRouter() // 初始化VueRouter new Vue({ router // 將VueRouter的實(shí)例對(duì)象配置到Vue實(shí)例化配置對(duì)象的router選項(xiàng)中 }).$mount('#app')
main.js中引用
// src/main.js import router from './router' new Vue({ router, render: h => h(App) }).$mount('#app')
Router的相關(guān)配置
屬性名 | 類型 | 描述 |
---|---|---|
routes | Array | 當(dāng)前Router中所有路由配置 |
modeString | 可選值: "hash" / "history" | 默認(rèn)值'hash' 該模式下路由使用hash保證路由與視圖一致history 模式使用h5新增 window.history 實(shí)現(xiàn)路由與視圖一致 |
linkActiveClass | String 默認(rèn)值: "router-link-active" | 全局配置 默認(rèn)的激活的 class |
linkExactActiveClass | String 默認(rèn)值: "router-link-exact-active" | 全局配置 默認(rèn)的精確激活的 class。 |
注意 嚴(yán)格匹配link標(biāo)簽to路由路徑必須全等于當(dāng)前瀏覽器的url,非嚴(yán)格匹配當(dāng)前瀏覽器url可以為當(dāng)前l(fā)ink的子路由。
例子
to="/home" url="/home/user" 非嚴(yán)格匹配 to="/home" url="/home/user/10086" 非嚴(yán)格匹配 to="/home" url="/home" 嚴(yán)格匹配 to="/" url="/order" / 是所有路由的根路由,所以他們非嚴(yán)格匹配
Router.routes 的相關(guān)配置
{ path: string, component?: Component, // 當(dāng)前路由匹配時(shí)顯示的路由組件 name?: string, // 命名路由 redirect?: string | Location | Function, // 路由重定向 props?: boolean | Object | Function, // alias?: string | Array<string>, // 路由別名 children?: Array<RouteConfig>, // 嵌套路由 beforeEnter?: (to: Route, from: Route, next: Function) => void, //路由守衛(wèi) caseSensitive?: boolean, // 匹配規(guī)則是否大小寫(xiě)敏感?(默認(rèn)值:false) }
實(shí)現(xiàn)一個(gè)簡(jiǎn)單的路由
1.配置路由
import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' import Home from './views/Home' import Order from './views/Order' import User from './views/User' // Vue支持VueRouter Vue.use(VueRouter) let router = new VueRouter({ routes: [ { path: '/home', component: Home }, { path: '/order', component: Order }, { path: '/user', component: User } ] }) new Vue({ render: h => h(App), router }).$mount('#app')
2. 在組件中實(shí)現(xiàn)路由
VueRouter給Vue提供了兩個(gè)組件
- router-link
- router-view
1. router-link 用于實(shí)現(xiàn)路由的跳轉(zhuǎn)組件:該組件支持的屬性
to: string | location 當(dāng)用戶點(diǎn)擊該組件時(shí)就會(huì)跳轉(zhuǎn)至to指定的路由
// 導(dǎo)航指定的url <router-link to="/home">主頁(yè)</router-link> <router-link to="/order">訂單</router-link> <router-link to="/user">用戶</router-link> /* 導(dǎo)航指定的location vue router中l(wèi)ocation對(duì)象的常用屬性{ path:'/', //指定跳轉(zhuǎn)路由的路徑 hash:'#top' // 指定跳轉(zhuǎn)路由的哈希值 name: 'Home', // 指定跳轉(zhuǎn)的具名路由的name值 params: {}, // 指定跳轉(zhuǎn)的路由傳遞params對(duì)象 query: {} // 指定跳轉(zhuǎn)的路由傳遞query鍵值對(duì) } */ <router-link :to="{path:'/user'}">user</router-link> // 使用location進(jìn)行頁(yè)面跳轉(zhuǎn)時(shí),當(dāng)前l(fā)ocation的params屬性無(wú)法傳遞給路由組件的 <router-link :to="{path:'/user',hash:'#top',params:{id:1,name:'小明'}}">user</router-link> // 使用name路由導(dǎo)航,可以向任何具名路由傳遞params <router-link :to="{name:'User',hash:'#top',params:{id:1,name:'小明'}}">user</router-link> // query支持 name導(dǎo)航和path導(dǎo)航,不推薦傳遞對(duì)象屬性時(shí)使用query傳參 <router-link :to="{name:'User',hash:'#top',query:{id:1,name:'小明'}}">user</router-link>
replace: bool 當(dāng)該屬性為真時(shí),路由的跳轉(zhuǎn)將以替換的形式跳轉(zhuǎn)到下一個(gè)頁(yè)面(下一個(gè)路由會(huì)把當(dāng)前瀏覽器歷史記錄棧中的url替換成將要跳轉(zhuǎn)的路由),默認(rèn)值為false
// 使用替換的形式跳轉(zhuǎn)路由 <router-link class="tab-item" replace to="/user">用戶</router-link>
append: bool 當(dāng)該屬性為真時(shí),當(dāng)前路由如果是相對(duì)路徑(路徑?jīng)]有/開(kāi)頭)路由的跳轉(zhuǎn)將會(huì)基于瀏覽器url進(jìn)行下一級(jí)的跳轉(zhuǎn),默認(rèn)值為false
// 如果當(dāng)前瀏覽器url /order // 點(diǎn)擊 Gec 會(huì)跳轉(zhuǎn)到 /order/gec <router-link to="gec" append>Gec</router-link> // 點(diǎn)擊 Gec1 因?yàn)镚ec1的to不是相對(duì)路徑 append就會(huì)無(wú)效,路由會(huì)跳轉(zhuǎn)到 /gec <router-link to="/gec" append>Gec1</router-link> // 點(diǎn)擊 Gec2 沒(méi)有append 會(huì)跳轉(zhuǎn)到 /gec <router-link to="gec">Gec2</router-link>
tag: string 指定當(dāng)該router-link標(biāo)簽最終以什么DOM元素渲染到頁(yè)面上,默認(rèn)值是a
// 將router-link以span元素渲染到頁(yè)面上 <router-link tag="span" class="tab-item" to="/">主頁(yè)</router-link>
active-class: string 指定當(dāng)前router-link元素,如果與瀏覽器url非嚴(yán)格匹配時(shí)class名。默認(rèn)值是VueRouter實(shí)例化時(shí) linkActiveClass 指定值
// 當(dāng)前router-link非嚴(yán)格匹配時(shí)class名為aaaa <router-link active-class="aaaa" to="/order">訂單</router-link>
event: string | Array<string> 指定當(dāng)前router-link元素,聲明可以用來(lái)觸發(fā)導(dǎo)航的事件。可以是一個(gè)字符串或是一個(gè)包含字符串的數(shù)組。默認(rèn)值是click
// 雙擊 和 點(diǎn)擊都能觸發(fā)當(dāng)前元素的路由跳轉(zhuǎn) <router-link :event="['dblclick','click']" to="/">主頁(yè)</router-link>
2. router-view 根據(jù)當(dāng)前VueRouter的配置,當(dāng)路由路由路徑發(fā)生改變時(shí)渲染對(duì)應(yīng)的路由視圖組件
router-view 組件是一個(gè) functional 組件,渲染路徑匹配到的視圖組件。 渲染的組件還可以內(nèi)嵌自己的 router-view,根據(jù)嵌套路徑,渲染嵌套組件。 其他屬性 (非 router-view 使用的屬性除name) 都直接傳給渲染的組件,很多時(shí)候,每個(gè)路由的數(shù)據(jù)都是包含在路由參數(shù)中。
因?yàn)樗彩莻€(gè)組件,所以可以配合 transition 和 keep-alive 使用。如果兩個(gè)結(jié)合一起用,要確保在內(nèi)層使用 keep-alive:
<transition name="fade"> <keep-alive> <router-view></router-view> </keep-alive> </transition>
以上就是詳解Vue-Router的安裝與使用的詳細(xì)內(nèi)容,更多關(guān)于Vue-Router的安裝與使用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vuex中store.commit和store.dispatch的區(qū)別及使用方法
這篇文章主要介紹了vuex中store.commit和store.dispatch的區(qū)別及使用方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01vue項(xiàng)目?jī)?yōu)雅實(shí)現(xiàn)自動(dòng)引入組件的方法詳解
在我們寫(xiě)vue項(xiàng)目的時(shí)候,都會(huì)引入一些組件庫(kù),有時(shí)候有可能還不止一個(gè)組件庫(kù),那么如何優(yōu)雅的實(shí)現(xiàn)自動(dòng)引入組件呢,下面小編就來(lái)和大家詳細(xì)講講吧2023-09-09Vue跨端渲染實(shí)現(xiàn)多端無(wú)縫銜接
這篇文章主要介紹了Vue跨端渲染實(shí)現(xiàn)多端無(wú)縫銜接,Vue跨端渲染是一種基于Vue框架的跨平臺(tái)開(kāi)發(fā)技術(shù),能夠?qū)崿F(xiàn)Web、iOS和Android三端的無(wú)縫銜接,提高開(kāi)發(fā)效率和用戶體驗(yàn)2023-05-05關(guān)于Vue Router中路由守衛(wèi)的應(yīng)用及在全局導(dǎo)航守衛(wèi)中檢查元字段的方法
這篇文章主要介紹了關(guān)于Vue Router中路由守衛(wèi)的應(yīng)用及在全局導(dǎo)航守衛(wèi)中檢查元字段的方法,實(shí)現(xiàn)方法有兩種,本文通過(guò)實(shí)例代碼對(duì)每種方法介紹的很詳細(xì),需要的朋友參考下2018-12-12vue3 emit is not a function問(wèn)題及解決
這篇文章主要介紹了vue3 emit is not a function問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09element日歷calendar組件上月、今天、下月、日歷塊點(diǎn)擊事件及模板源碼
這篇文章主要介紹了element日歷calendar組件上月、今天、下月、日歷塊點(diǎn)擊事件及模板源碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07