Vue-Router的routes配置詳解
介紹
在使用vue-router的項(xiàng)目中,實(shí)例化VueRouter是其配置選項(xiàng)routes該選項(xiàng)指定路由與視圖的組件的關(guān)系或者路由與其他路由的關(guān)系,Router配置選項(xiàng)中是其中最重要的配置。
routes中對(duì)象屬性
interface RouteConfig = { path: string, component?: Component, name?: string, // 命名路由 *components?: { [name: string]: Component }, // 命名視圖組件 https://router.vuejs.org/zh/guide/essentials/named-views.html#%E5%B5%8C%E5%A5%97%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE redirect?: string | Location | Function, props?: boolean | Object | Function, alias?: string | Array<string>, children?: Array<RouteConfig>, // 嵌套路由 beforeEnter?: (to: Route, from: Route, next: Function) => void, *meta?: any, // 2.6.0+ *caseSensitive?: boolean, // 匹配規(guī)則是否大小寫敏感?(默認(rèn)值:false) *pathToRegexpOptions?: Object // 編譯正則的選項(xiàng) }
path: string
指定當(dāng)前路由的路徑,當(dāng)瀏覽器url與path匹配時(shí)router-view就會(huì)渲染當(dāng)前route對(duì)象指定視圖組件component/components
const routes = [ { path: '/', component: Home }, { path:'/user', component: User } ] const router = new VueRouter({ routes })
注意Vue的router支持動(dòng)態(tài)路徑,以 "/:屬性名"形式作為當(dāng)前path字符串中的一部分。這段字符串路由將作為動(dòng)態(tài)路由匹配真實(shí)url上響應(yīng)字符串信息
const routes = [ { path: '/', component: Home }, { path:'/user/:id/:local', // 動(dòng)態(tài)路徑 :id :local component: User } ] const router = new VueRouter({ routes, }) // 路由跳轉(zhuǎn) <div id="app"> <router-view /> // 下面這些鏈接都會(huì)與/user/:id/:local匹配 <router-link to="/user/007/lk">用戶007</router-link> <router-link to="/user/111/js">用戶111</router-link> <router-link to="/user/10086/yk">用戶10086</router-link> <router-link to="/user/241247/la">用戶241247</router-link> </div> /* 當(dāng)我們跳轉(zhuǎn)至上面的路由時(shí)其對(duì)應(yīng)的路由視圖組件User內(nèi)部就可以通過 this.$route.params 獲取到動(dòng)態(tài)路徑匹配到的信息 例子: url /user/007/lk this.$route.params -> {id:'007',local:'lk'} url /user/10086/yk this.$route.params -> {id:'10086',local:'yk'} */
注意this.$route就是當(dāng)前vue應(yīng)用程序所在路由的信息對(duì)象
// http://localhost:8080/#/user/10086/cc?wd=iPhone&aa=test { name: undefined, // 當(dāng)前路由名 *fullPath: "/user/10086/cc" // 當(dāng)前url完整路徑 *hash: "" // 當(dāng)前路由的哈希 *matched: [{…}] *meta: {} params: {id: "10086", local: "cc"} // 動(dòng)態(tài)路徑匹配到鍵值對(duì)對(duì)象 *path: "/user/10086/cc" // 當(dāng)前url匹配到的路徑 query: { // url的query字符串網(wǎng)址?后面的參數(shù)解析出來的對(duì)象 wd: "iPhone", aa: "test" } }
component : Component | () => import(組件)
當(dāng)前瀏覽器url與路由的path匹配時(shí)所渲染的路由組件
import Vue from 'vue' import HotMusicList from '../views/HotMusicList' const routes = [ { path: '/hot', component: HotMusicList }, { // 動(dòng)態(tài)路徑匹配 通過:id獲取每一首歌不同的id path: '/music/:id', // 路由的懶加載,通過函數(shù)的形式,可以讓項(xiàng)目中哪些不許一開始就要加載的組件,加載到項(xiàng)目中去 // 只有瀏覽器跳轉(zhuǎn)到當(dāng)前路由時(shí),該路由組件才會(huì)加載到項(xiàng)目中去 // 這樣做的好處是減少不必要的加載降低應(yīng)用加載速度和運(yùn)行帶寬 component: () => import('../views/MusicPlay') } ]
注意在項(xiàng)目開發(fā)中應(yīng)用中不需要一開始就加載的路由組件請(qǐng)使用懶加載
name: string
給路由命名,讓路由成為具名路由。路由的導(dǎo)航就可以使用name進(jìn)行跳轉(zhuǎn)。(路由使用location導(dǎo)航時(shí)只有具名路由可可以直接接受pramas傳參)
const routes = [ { path: '/user', name: 'User', component: () => import('../views/User.vue') } ]
redirect: string | Location | Function
重定向路由,當(dāng)前應(yīng)用訪問導(dǎo)航至該路由時(shí),這個(gè)路由會(huì)(以替換的形式)自動(dòng)重定向到redirect指定的新路由
const routes = [ { path: '/contact', component: ContactView }, { path: '/user/:id', name: 'User', component: () => import('../views/User.vue') }, { path: '/oldpath1', redirect: '/contact' }, { path: '/oldpath2', redirect: { name: 'User', params: { name: '小明', age: 19 } } }, /* redirect 支持函數(shù)的形式,該函數(shù)接收一個(gè)參數(shù)就是個(gè)訪問oldpath時(shí)生成的location對(duì)象 redirect 函數(shù)的形式必須返回重定向路由的path或location */ { path: '/oldpath2', redirect:(oldpathLocation) => '/contact' } { path: '/oldpath4', redirect:(oldpathLocation) => { name: 'User', params: { name: '小明', age: 19 } } } ]
props: boolean | Object | Function
路由的動(dòng)態(tài)匹配一般情況下只能通過,this.$route.params獲取動(dòng)態(tài)匹配到的值。當(dāng)設(shè)置props屬性后動(dòng)態(tài)匹配到的鍵值對(duì)可以作為組件props直接傳遞給視圖組件,這樣大大降低組件的耦合性
布爾值.如果 props 被設(shè)置為 true,route.params 所有鍵值對(duì)將會(huì)被設(shè)置為組件props屬性。
const routes = [ { path: '/hot', component: HotMusicList }, { // 動(dòng)態(tài)路徑匹配 通過:id獲取每一首歌不同的id path: '/music/:id', // 路由的懶加載 component: () => import('../views/MusicPlay'), props: true } ] // 組件內(nèi)部 就可通過props的id 訪問到this.$route.id <template> <div> 歌曲播放 <audio controls :src="musicUrl"/> </div> </template> <script> export default { props: ['id'], // 路由動(dòng)態(tài)路徑匹配到的鍵值對(duì)會(huì)自動(dòng)傳遞給當(dāng)前組件的同名props data() { return { musicUrl: '' } }, created() { fetch(`/song/url?id=${this.id}`) .then((res) => res.json()) .then(({ data }) => { //真實(shí)開發(fā)中這里要判斷數(shù)據(jù)是否請(qǐng)求成功 console.log(data[0]); // 把歌曲的數(shù)據(jù)賦值給data this.musicUrl = data[0]?.url }); }, }; </script>
對(duì)象props對(duì)象形式,就是將對(duì)象key作為渲染組件props屬性名,value就是對(duì)應(yīng)屬性值 (這種寫法value不會(huì)改變所以傳遞props都是一些靜態(tài)屬性)
{ path: '/home/:id', name: 'Home', props: { a: 1, b: false }, component: Home }
函數(shù)props的函數(shù)寫法接收當(dāng)前路由信息對(duì)象作為參數(shù),該函數(shù)會(huì)返回一個(gè)對(duì)象.對(duì)象的key就是渲染組件props屬性名,value就是對(duì)應(yīng)屬性值
{ path: '/home/:id', name: 'Home', props: (route) => ({ a: route.query.wd, //將路由query.wd傳遞給組件Home的a props b: route.params.id //將路由params.id傳遞給組件Home的b props }), component: Home }
alias: string| Array[string]
路由的別名,可以給一個(gè)路由設(shè)置多個(gè)路徑。當(dāng)訪問這些別名路徑時(shí)都會(huì)訪問同一個(gè)路由組件
const routes = [ { path: '/hot', component: HotMusicList, alias: ['/list','/rank','recommend'] } ]
children?: Array[RouteConfig]
嵌套路由,可以給當(dāng)前路由設(shè)置二級(jí)路由
[ { path: '/home', component: Home, children: [ { path: '/home/follow', component: () => import('../views/home/Follow') }, { path: 'recommend', //路由前不加/相對(duì)路徑等價(jià)于 "/home/recommed" component: () => import('../views/home/Recommend') } ] } ]
beforeEnter: (to: Route, from: Route, next: Function) => void
路由的獨(dú)享守衛(wèi),當(dāng)應(yīng)用將要導(dǎo)航到當(dāng)前路由時(shí),可以使用該守衛(wèi)進(jìn)行一些邏輯運(yùn)算實(shí)現(xiàn)是否阻止本次導(dǎo)航
Router的實(shí)例方法
概念將VueRouter實(shí)例對(duì)象配置到Vue中后, vue實(shí)例就會(huì)擁有一個(gè)this.$router屬性,this.$router就是當(dāng)前VueRouter的實(shí)例對(duì)象。他提供了所有編程式導(dǎo)航的API。
注意router是路由實(shí)例對(duì)象里面包含著路由的屬性方法,router是路由實(shí)例對(duì)象里面包含著路由的屬性方法, router是路由實(shí)例對(duì)象里面包含著路由的屬性方法,route是當(dāng)前瀏覽訪問url路由信心對(duì)象
*VueRouter實(shí)例屬性
- app 配置了 當(dāng)前router 的 Vue 根實(shí)例
- mode 當(dāng)前Router使用的模式 "hash" | "history"
- currentRoute 當(dāng)前路由對(duì)應(yīng)的route信息對(duì)象
VueRouter實(shí)例方法
router.push(string | location)
編程式導(dǎo)航到指定的路由
<template> <div> <h3>主頁</h3> <div class="tab"> <router-link to="/home/follow">關(guān)注</router-link>| <button @click="gotoRecommend">推薦</button> </div> <router-view /> </div> </template> <script> export default { methods: { gotoRecommend() { // this.$router.push("/home/recommend"); this.$router.push({path:"/home/recommend", query:{wd:1,offset:0}}) }, }, }; </script>
router.replace(string | location)
編程式替換當(dāng)前路由導(dǎo)航到新路由
<template> <div> <h3>主頁</h3> <div class="tab"> <router-link to="/home/follow">關(guān)注</router-link>| <button @click="gotoRecommend">推薦</button> </div> <router-view /> </div> </template> <script> export default { methods: { gotoRecommend() { // this.$router.replace("/home/recommend"); this.$router.replace({path:"/home/recommend", query:{wd:1,offset:0}}) }, }, }; </script>
router.go(Int number)
編程式從當(dāng)前路由history棧的位置前進(jìn)后退number條
this.$router.go(3) // 從當(dāng)前路由history棧的位置前進(jìn)3條 this.$router.go(-1) // 從當(dāng)前路由history棧的位置后退1條 this.$router.go(0) // 強(qiáng)制刷新頁面
注意當(dāng)前進(jìn)/后退的number大于實(shí)例路由history棧的長(zhǎng)度時(shí),會(huì)前進(jìn)到最后一條或后退到第一條,但是不推薦這樣做會(huì)引起性能問題造成頁面卡頓
router.back()
編程式從當(dāng)前路由history棧的位置后退1條
this.$router.back() // 等價(jià)于this.$router.go(-1)
router.forward()
編程式從當(dāng)前路由history棧的位置前進(jìn)1條
this.$router.forward() // 等價(jià)于this.$router.go(1)
路由懶加載
用vue.js寫單頁面應(yīng)用時(shí),會(huì)出現(xiàn)打包后的JavaScript包非常大,影響頁面加載,我們可以利用路由的懶加載去優(yōu)化這個(gè)問題,當(dāng)我們用到某個(gè)路由后,才去加載對(duì)應(yīng)的組件,這樣就會(huì)更加高效
沒有使用懶加載
先引入了組件,事先加載好了。然后不管有沒有使用都已經(jīng)存在
import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, ] const router = new VueRouter({ routes }) export default router
使用懶加載
只有路由被使用到了才進(jìn)行加載對(duì)應(yīng)的組件
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/mock', name: 'Mock', // 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/Mock.vue') } ] const router = new VueRouter({ routes }) export default router
history模式和hash模式
vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來模擬一個(gè)完整的 URL,于是當(dāng) URL 改變時(shí),頁面不會(huì)重新加載。
如果不想要很丑的 hash,我們可以用路由的 history 模式,這種模式充分利用 history.pushState API 來完成 URL 跳轉(zhuǎn)而無須重新加載頁面。
history模式
history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定瀏覽器支持)這兩個(gè)方法應(yīng)用于瀏覽器的歷史記錄棧,在當(dāng)前已有的 back、forward、go 的基礎(chǔ)之上(方法可在Router的實(shí)例方法中查看),它們提供了對(duì)歷史記錄進(jìn)行修改的功能。只是當(dāng)它們執(zhí)行修改時(shí),雖然改變了當(dāng)前的 URL,但瀏覽器不會(huì)立即向后端發(fā)送請(qǐng)求。
手動(dòng)設(shè)置
效果
hash模式
hash —— 即地址欄 URL 中的 # 符號(hào)(此 hash 不是密碼學(xué)里的散列運(yùn)算)。比如這個(gè) URL:http://localhost:8081/#/form hash 的值為 #/form。它的特點(diǎn)在于:hash 雖然出現(xiàn)在 URL 中,但不會(huì)被包括在 HTTP 請(qǐng)求中,對(duì)后端完全沒有影響,因此改變 hash 不會(huì)重新加載頁面。
路由守衛(wèi)
全局路由守衛(wèi)
- router.beforeEach 前置守衛(wèi)
- *router.beforeResolve 前置守衛(wèi)
- *router.afterEach 后置守衛(wèi)
情況一
在使用vue-router開發(fā)的項(xiàng)目中,一般情況下不同路由之間的切換會(huì)將離開的路由組件卸載,進(jìn)入的路由組件掛載。
這種情況下我們可通過vue的聲明周期進(jìn)行一些頁面的邏輯操作。但是如果有些情況下應(yīng)用為提高用戶體驗(yàn)減少卸載頻率或者保存離開組件的活躍性,使用keep-alive組件包裹router-view后路由的切換就把會(huì)卸載離開的組件了。這時(shí),如果你的組件需要在路由進(jìn)入或離開時(shí)進(jìn)行一些操作修改組件自身的數(shù)據(jù)DOM編程等,就不能再依靠vue的生命周期了。這種情況下請(qǐng)使用組件內(nèi)的路由守衛(wèi)。
- beforeRouteEnter 路由組件將要進(jìn)入
- beforeRouteUpdate (2.2 新增) 路由組件將要更新 -> /music/10086 /music/10010
- beforeRouteLeave 路由組件將要離開
export default { props: ['id'], data() { return { musicUrl: '' } }, beforeRouteEnter (to, from, next) { // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用 // 不!能!獲取組件實(shí)例 `this` // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前,組件實(shí)例還沒被創(chuàng)建 console.log(undefined) }, beforeRouteUpdate (to, from, next) { // 在當(dāng)前路由改變,但是該組件被復(fù)用時(shí)調(diào)用 // 舉例來說,對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id,在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候, // 由于會(huì)渲染同樣的 Foo 組件,因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。 // 可以訪問組件實(shí)例 `this` }, beforeRouteLeave (to, from, next) { // 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用 // 可以訪問組件實(shí)例 `this` } }
注意組件獨(dú)享的路由守衛(wèi)方法都包含三個(gè)參數(shù) to from next
- to : location 本次路由導(dǎo)航跳轉(zhuǎn)的目標(biāo)路由信息對(duì)象
- from : location 本次路由導(dǎo)航從哪個(gè)路由信息對(duì)象跳轉(zhuǎn)而來()
- next : function 該方法是否允許本次路由跳轉(zhuǎn)
next() // 允許路由跳轉(zhuǎn) next(true) // 允許路由跳轉(zhuǎn) next(false) // 不允許路由跳轉(zhuǎn) next('/') / next({ path: '/' }) // 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷,然后進(jìn)行一個(gè)新的導(dǎo)航。你可以向 next 傳遞任意位置對(duì)象,且允許設(shè)置諸如 replace: true、name: 'home' 之類的選項(xiàng)。 // 注意 只有beforeRouteEnter 的next方法可以接受一個(gè)回調(diào)函數(shù), // 該回調(diào)函數(shù)接收當(dāng)前路由組件實(shí)例對(duì)象作為參數(shù),我們可以通過該參數(shù)操作當(dāng)前組件 beforeRouteEnter(to, from, next) { console.log(to , from) console.log('組件將要進(jìn)入,這是組件實(shí)例還不存在',this) next(vm => { fetch(`/song/url?id=${vm.id}`) .then((res) => res.json()) .then(({ data }) => { //真實(shí)開發(fā)中這里要判斷數(shù)據(jù)是否請(qǐng)求成功 console.log(data[0]); // 把歌曲的數(shù)據(jù)賦值給data vm.musicUrl = data[0]?.url }); }) // 允許路由跳轉(zhuǎn) }
情況二
在使用vue-router開發(fā)的項(xiàng)目中,一般情況下不同路由之間的切換會(huì)將離開的路由組件卸載,進(jìn)入的路由組件掛載。
這種情況下我們可通過vue的聲明周期進(jìn)行一些頁面的邏輯操作。但是如果有些情況下應(yīng)用為提高用戶體驗(yàn)減少卸載頻率或者保存離開組件的活躍性,使用keep-alive組件包裹router-view后路由的切換就吧會(huì)卸載離開的組件了這時(shí),如果你的組件需要在路由進(jìn)入或離開時(shí)進(jìn)行一些操作不需要修改組件自身的狀態(tài)只是判斷是否允許本次路由的跳轉(zhuǎn)等。這種情況下請(qǐng)使用路由獨(dú)享守衛(wèi)。
beforeEnter(to, from, next) 當(dāng)路由將要導(dǎo)航至當(dāng)前路由時(shí)觸發(fā) const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] })
案例 登錄驗(yàn)證 路由獨(dú)享守衛(wèi)配置
const routes = [ { path: '/', component: Home }, { path: '/discover', component: () => import('../views/Discover') }, { path: '/mine', component: () => import('../views/Mine'), //路由獨(dú)享守衛(wèi) beforeEnter(to, from, next) { // 因?yàn)檫@個(gè)守衛(wèi)沒有任何DOM操作或者對(duì)組件自身狀態(tài)進(jìn)行讀寫 // 這樣的守衛(wèi)就可以作為路由獨(dú)享守衛(wèi) // 正確的做法存在cookie storage中 if (localStorage.getItem("user")) { next(); } else { // 這里嗎沒有this, next接收一個(gè)回調(diào)函數(shù),在回調(diào)函數(shù)中跳轉(zhuǎn) // 下面的寫法進(jìn)入了個(gè)人頁面,又從個(gè)人頁面重定向到登錄,這樣可能會(huì)造成一些不必要的bug // next((vm) => { // vm.$router.replace('/landr') // }); next({name:'login',params:{to}}); //阻止本次跳轉(zhuǎn),直接導(dǎo)航到指定路由 } } }, { path: '/landr', // login an register component: () => import('../views/loginanregister/LoginAndRegister'), children: [ { name:'login', path: 'login', component: () => import('../views/loginanregister/Login') }, { path: 'register', component: () => import('../views/loginanregister/Register') } ] } ]
情況三
全局路由守衛(wèi),當(dāng)應(yīng)用中有多個(gè)路由都需要進(jìn)行相同邏輯的路由守衛(wèi)判斷時(shí),并且該邏輯操作中不需要直接操作組件DOM或組件組件的狀態(tài)這是就可以使用全局路由守衛(wèi)(全局守衛(wèi)最常見的應(yīng)用就是登陸驗(yàn)證)
beforeEach(to,from,next) 全局前置守衛(wèi)
import Vue from 'vue' import Router from 'vue-router' import Home from '../views/Home' Vue.use(Router) const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/discover', name: 'Discover', component: () => import('../views/Discover') }, { path: '/mine', name: 'Mine', component: () => import('../views/Mine'), }, { path: '/landr', // login an register component: () => import('../views/loginanregister/LoginAndRegister'), children: [ { name: 'login', path: 'login', component: () => import('../views/loginanregister/Login') }, { path: 'register', component: () => import('../views/loginanregister/Register') } ] } ] const router = new Router({ routes, linkExactActiveClass: 'active' }) // 路由的全局守衛(wèi)所有的路由跳轉(zhuǎn),都會(huì)調(diào)用該守衛(wèi) // 全局路由守衛(wèi)也是Vue router應(yīng)用中,最適合做登錄驗(yàn)證的地方 router.beforeEach((to, from, next) => { if(to.name === "Mine" || to.name === "Discover") { // 因?yàn)檫@個(gè)守衛(wèi)沒有任何DOM操作或者對(duì)組件自身狀態(tài)進(jìn)行讀寫 // 這樣的守衛(wèi)就可以作為路由獨(dú)享守衛(wèi) // 正確的做法存在cookie storage中 if (localStorage.getItem("user")) { next(); } else { // 這里嗎沒有this, next接收一個(gè)回調(diào)函數(shù),在回調(diào)函數(shù)中跳轉(zhuǎn) // 下面的寫法進(jìn)入了個(gè)人頁面,又從個(gè)人頁面重定向到登錄,這樣可能會(huì)造成一些不必要的bug // next((vm) => { // vm.$router.replace('/landr') // }); next({ name: 'login', params: { to } }); //阻止本次跳轉(zhuǎn),直接導(dǎo)航到指定路由 } }else { next() } }) export default router
router.beforeResolve(to,from,next) 全局前置守衛(wèi),在beforeEach觸發(fā)之后
router.afterEach(to, from) 全局后置守衛(wèi),該守衛(wèi)路由已經(jīng)離開時(shí)觸發(fā),該守衛(wèi)沒有next, next 函數(shù)也不會(huì)改變導(dǎo)航本身
到此這篇關(guān)于Vue-Router的routes配置詳解的文章就介紹到這了,更多相關(guān)Vue-Router routes配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue3配置router路由并實(shí)現(xiàn)頁面跳轉(zhuǎn)功能
- Vue3路由配置createRouter、createWebHistory、useRouter和useRoute詳解
- Vue3實(shí)戰(zhàn)學(xué)習(xí)配置使用vue?router路由步驟示例
- vue-router如何實(shí)現(xiàn)history模式配置
- Vue Router history模式的配置方法及其原理
- vue-router的使用方法及含參數(shù)的配置方法
- 使用vue-router為每個(gè)路由配置各自的title
- vue router 配置路由的方法
- vue-router+nginx 非根路徑配置方法
- vue中的Router基本配置命令實(shí)例詳解
相關(guān)文章
Vite打包項(xiàng)目后圖片丟失的簡(jiǎn)單解決方法
vue項(xiàng)目完成打包上線的時(shí)候很多人都會(huì)碰到靜態(tài)資源找不到的情況,下面這篇文章主要給大家介紹了關(guān)于Vite打包項(xiàng)目后圖片丟失的簡(jiǎn)單解決方法,需要的朋友可以參考下2023-05-05vue如何動(dòng)態(tài)獲取當(dāng)前時(shí)間
這篇文章主要介紹了vue如何動(dòng)態(tài)獲取當(dāng)前時(shí)間問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12使用Vue-router二級(jí)路由跳轉(zhuǎn)另一條路由下的子級(jí)
這篇文章主要介紹了使用Vue-router二級(jí)路由跳轉(zhuǎn)另一條路由下的子級(jí)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10詳解Vue3中shallowRef和shallowReactive的使用
這篇文章主要為大家介紹了Vue3中shallowRef和shallowReactive函數(shù)的使用方法,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)Vue有一定的幫助,需要的可以參考一下2022-07-07Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03Vue解析帶html標(biāo)簽的字符串為dom的實(shí)例
今天小編就為大家分享一篇Vue解析帶html標(biāo)簽的字符串為dom的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11