vue-router 學(xué)習(xí)快速入門
更新時(shí)間：2017年03月01日 09:28:44 作者：Self_Refacter
本篇文章主要介紹了vue-router 學(xué)習(xí)快速入門，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
vue-router 快速入門
配置路由
$ 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 }
//指定路由和對應(yīng)要渲染的組件
//404的path應(yīng)該是'*',要放在最末尾，當(dāng)前面的都匹配不到時(shí)才匹配到404頁面
//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)注出組件渲染的位置
#號的含義
#號前表示的是發(fā)送給服務(wù)端的請求，要求返回html文件，而#號后表示的是發(fā)送給本地js的請求以尋求解決
路由參數(shù)動態(tài)綁定
使用watch
watch: {
'$route'(to,from) {
//to當(dāng)前路由，from上一個路由
this.id = to.params.id
}
}
路由的數(shù)據(jù)傳遞
復(fù)制代碼 代碼如下:
<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
通過 $route.query.鍵名 來訪問
命名視圖
router-view 可以通過配置名字 name 來指定組件渲染的位置，增加了組件的復(fù)用性，比如分成 header main hero footer 來分別在一個視圖中的不同位置上加載不同的組件
組件懶加載
我們只需要加載我們需要的組件呈現(xiàn)給用戶，而其他不需要第一時(shí)間加載的組件，可以使用 webpack 實(shí)現(xiàn)異步加載，只在需要的時(shí)候才會發(fā)出請求，請求加載另一個組件
routes.js
const User = resolve => {
require.ensure(['./components/user/User.vue'], () => {
resolve(require('./components/user/User.vue'))
}, 'GroupName')
}
//webpack 異步加載，通過組名，將要同時(shí)一起加載的組件打包加載
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
對于一個中后臺類的項(xiàng)目,一個比較常見的展示形式就是Table了,這篇文章主要給大家介紹了關(guān)于Vue封裝通用table組件的相關(guān)資料,需要的朋友可以參考下2021-07-07
我們正常在開發(fā)項(xiàng)目中,表格的風(fēng)格是一致的,但是表格或多或少會有些不同,有些是需要分頁,有些是按鈕功能不同,有些又需要加Tag,或者對時(shí)間進(jìn)行格式化等,這篇文章主要介紹了elementPlus表格二次封裝過程,需要的朋友可以參考下2024-07-07
解決vue父組件調(diào)用子組件只執(zhí)行一次問題
開發(fā)中,需求是將內(nèi)容展示作為一個組件,輸入為contentId,請求在組件中,只需根據(jù)父組件傳過來的contentId去請求內(nèi)容的詳情即可,但是過程中卻發(fā)現(xiàn)一個問題,父組件調(diào)用子組件只執(zhí)行一次,所以本文就給大家介紹解決vue父組件調(diào)用子組件只執(zhí)行一次問題2023-09-09
這篇文章主要介紹了vue項(xiàng)目接口域名動態(tài)獲取操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue3新特性之在Composition API中使用CSS Modules
這篇文章主要介紹了Vue3新特性之在Composition API中使用CSS Modules,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。這篇文章主要介紹了Vue.js用法詳解,需要的朋友可以參考下2017-11-11
如何在Vue中使用CleaveJS格式化你的輸入內(nèi)容
這篇文章主要介紹了如何在Vue中使用CleaveJS格式化你的輸入內(nèi)容，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
使用el-checkbox-group選中后值為true和false遇到的坑
這篇文章主要介紹了使用el-checkbox-group選中后值為true和false遇到的坑及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue中如何實(shí)現(xiàn)后臺管理系統(tǒng)的權(quán)限控制的方法示例
這篇文章主要介紹了vue中如何實(shí)現(xiàn)后臺管理系統(tǒng)的權(quán)限控制的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09