vue-router 學(xué)習(xí)快速入門(mén)
vue-router 快速入門(mén)
配置路由
$ npm install vue-router --save
routes.js
import Home from './pages/Home.vue'
import Gifs from './pages/Gifs.vue'
import User from './pages/User.vue'
export const routes = [
{ path: '', component: Home },
{ path: '/gifs', component: Gifs },
{ path: '/user/:id', component: User }
//指定路由和對(duì)應(yīng)要渲染的組件
//404的path應(yīng)該是'*',要放在最末尾，當(dāng)前面的都匹配不到時(shí)才匹配到404頁(yè)面
//this.$route.params.id 可以從路由中拿到id數(shù)據(jù)
]
main.js
import VueRouter from 'vue-router'
import { routes } from './routes'
Vue.use(VueRouter)
//路由初始化
const router = new VueRouter({
routes
})
//將路由注入根組件
new Vue({
el: '#app',
...
router,
render: h => h(App)
})
App.vue
<template>
<div class="app">
<router-view></router-view>
</div>
</template>
在模板中標(biāo)注出組件渲染的位置
#號(hào)的含義
#號(hào)前表示的是發(fā)送給服務(wù)端的請(qǐng)求，要求返回html文件，而#號(hào)后表示的是發(fā)送給本地js的請(qǐng)求以尋求解決
路由參數(shù)動(dòng)態(tài)綁定
使用watch
watch: {
'$route'(to,from) {
//to當(dāng)前路由，from上一個(gè)路由
this.id = to.params.id
}
}
路由的數(shù)據(jù)傳遞
<router-link :to="{ name: 'userEdit', params: { id: $route.params.id }, query: { locale: 'en', list: 2 } }"></router-link>
傳query參數(shù)可以達(dá)到地址欄出現(xiàn)/?locale=en&list=2
通過(guò) $route.query.鍵名 來(lái)訪問(wèn)
命名視圖
router-view 可以通過(guò)配置名字 name 來(lái)指定組件渲染的位置，增加了組件的復(fù)用性，比如分成 header main hero footer 來(lái)分別在一個(gè)視圖中的不同位置上加載不同的組件
組件懶加載
我們只需要加載我們需要的組件呈現(xiàn)給用戶(hù)，而其他不需要第一時(shí)間加載的組件，可以使用 webpack 實(shí)現(xiàn)異步加載，只在需要的時(shí)候才會(huì)發(fā)出請(qǐng)求，請(qǐng)求加載另一個(gè)組件
routes.js
const User = resolve => {
require.ensure(['./components/user/User.vue'], () => {
resolve(require('./components/user/User.vue'))
}, 'GroupName')
}
//webpack 異步加載，通過(guò)組名，將要同時(shí)一起加載的組件打包加載
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue+element創(chuàng)建動(dòng)態(tài)的form表單及動(dòng)態(tài)生成表格的行和列
這篇文章主要介紹了vue+element創(chuàng)建動(dòng)態(tài)的form表單及動(dòng)態(tài)生成表格的行和列 ,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
Vue中引入echarts的步驟及折線圖、柱狀圖常見(jiàn)配置項(xiàng)
這篇文章主要介紹了Vue中引入echarts的步驟及折線圖、柱狀圖常見(jiàn)配置項(xiàng),需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vue的組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-10-10
有時(shí)候不希望已經(jīng)請(qǐng)求過(guò)的數(shù)據(jù),再次請(qǐng)求重復(fù)執(zhí)行刷新操作,我們就需要使用數(shù)據(jù)緩存,這篇文章主要給大家介紹了關(guān)于如何巧用Vue緩存函數(shù)的相關(guān)資料,需要的朋友可以參考下2021-09-09
vue源碼解析computed多次訪問(wèn)會(huì)有死循環(huán)原理
這篇文章主要為大家介紹了vue源碼解析computed多次訪問(wèn)會(huì)有死循環(huán)原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
本篇文章主要介紹了淺談Vuex狀態(tài)管理(全家桶)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
vue-cli4.x創(chuàng)建企業(yè)級(jí)項(xiàng)目的方法步驟
這篇文章主要介紹了vue-cli4.x創(chuàng)建企業(yè)級(jí)項(xiàng)目的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了vue制作抓娃娃機(jī)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue中解決el-date-picker更改樣式不生效問(wèn)題
在使用Vue.js進(jìn)行前端開(kāi)發(fā)的過(guò)程中,Element?UI?是一個(gè)非常流行的UI庫(kù),它提供了一套完整的組件來(lái)快速搭建美觀的用戶(hù)界面,但是我們經(jīng)常遇到一個(gè)問(wèn)題使用Element?UI提供的el-date-picker組件時(shí),嘗試自定義其樣式卻無(wú)法生效,所以本文給大家介紹如何解決這個(gè)問(wèn)題2024-10-10
這篇文章主要介紹了VUE表達(dá)式{{}}中如何拼接字符問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07