vue-router 學(xué)習(xí)快速入門
更新時間：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)前面的都匹配不到時才匹配到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ù)可以達到地址欄出現(xiàn)/?locale=en&list=2
通過 $route.query.鍵名 來訪問
命名視圖
router-view 可以通過配置名字 name 來指定組件渲染的位置，增加了組件的復(fù)用性，比如分成 header main hero footer 來分別在一個視圖中的不同位置上加載不同的組件
組件懶加載
我們只需要加載我們需要的組件呈現(xiàn)給用戶，而其他不需要第一時間加載的組件，可以使用 webpack 實現(xiàn)異步加載，只在需要的時候才會發(fā)出請求，請求加載另一個組件
routes.js
const User = resolve => {
require.ensure(['./components/user/User.vue'], () => {
resolve(require('./components/user/User.vue'))
}, 'GroupName')
}
//webpack 異步加載，通過組名，將要同時一起加載的組件打包加載
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue+element創(chuàng)建動態(tài)的form表單及動態(tài)生成表格的行和列
這篇文章主要介紹了vue+element創(chuàng)建動態(tài)的form表單及動態(tài)生成表格的行和列 ,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Vue中引入echarts的步驟及折線圖、柱狀圖常見配置項,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vue的組件,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
有時候不希望已經(jīng)請求過的數(shù)據(jù),再次請求重復(fù)執(zhí)行刷新操作,我們就需要使用數(shù)據(jù)緩存,這篇文章主要給大家介紹了關(guān)于如何巧用Vue緩存函數(shù)的相關(guān)資料,需要的朋友可以參考下2021-09-09
vue源碼解析computed多次訪問會有死循環(huán)原理
這篇文章主要為大家介紹了vue源碼解析computed多次訪問會有死循環(huán)原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
本篇文章主要介紹了淺談Vuex狀態(tài)管理(全家桶)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue-cli4.x創(chuàng)建企業(yè)級項目的方法步驟
這篇文章主要介紹了vue-cli4.x創(chuàng)建企業(yè)級項目的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了vue制作抓娃娃機，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
在使用Vue.js進行前端開發(fā)的過程中,Element?UI?是一個非常流行的UI庫,它提供了一套完整的組件來快速搭建美觀的用戶界面,但是我們經(jīng)常遇到一個問題使用Element?UI提供的el-date-picker組件時,嘗試自定義其樣式卻無法生效,所以本文給大家介紹如何解決這個問題2024-10-10
這篇文章主要介紹了VUE表達式{{}}中如何拼接字符問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07