vue router 参数_Vue.js项目开发技术解析
Vue.js項(xiàng)目開(kāi)發(fā)技術(shù)解析
一、Vue.js實(shí)例
在一個(gè)Vue.js工程中，用于顯示內(nèi)容最基層的實(shí)例稱之為根實(shí)例。通過(guò)該實(shí)例可以進(jìn)行頁(yè)面或組件的更新和顯示。對(duì)于項(xiàng)目本身而言，無(wú)論是什么樣的頁(yè)面，都要基于該根實(shí)例進(jìn)行顯示。
1.1、何為構(gòu)造器
對(duì)于Vue.js項(xiàng)目來(lái)說(shuō)，每個(gè)應(yīng)用的起步都需要使用Vue.js的構(gòu)造函數(shù)創(chuàng)建一個(gè)根實(shí)例，如下：
// 邏輯部分代碼，建立Vue實(shí)例 var vm = new Vue({//選項(xiàng) })這里的vm其實(shí)是ViewModel的簡(jiǎn)稱。雖然Vue.js并不是完全遵循MVVM模型，但是Vue.js的設(shè)計(jì)無(wú)疑受到了它的啟發(fā)。
在實(shí)例化Vue.js時(shí)，需要傳入一個(gè)選項(xiàng)對(duì)象，它包括數(shù)據(jù)、模板、掛載元素、方法和生命周期鉤子等選項(xiàng)，全部的選項(xiàng)可以在API文檔中查看。
對(duì)于已經(jīng)創(chuàng)建的相關(guān)構(gòu)造器，可以擴(kuò)展為其他構(gòu)造器，相當(dāng)于對(duì)某一構(gòu)造器的繼承，從而達(dá)到可復(fù)用組件構(gòu)造器的目的。
演示代碼如下：
1.2、實(shí)例的屬性和方法
當(dāng)一個(gè) Vue 實(shí)例被創(chuàng)建時(shí)，它將 data 對(duì)象中的所有的屬性加入到 Vue 的響應(yīng)式系統(tǒng)中。當(dāng)這些屬性的值發(fā)生改變時(shí)，視圖將會(huì)產(chǎn)生“響應(yīng)”，即匹配更新為新的值。
// 我們的數(shù)據(jù)對(duì)象 var data = { a: 1 }// 該對(duì)象被加入到一個(gè) Vue 實(shí)例中 var vm = new Vue({data: data })// 獲得這個(gè)實(shí)例上的屬性 // 返回源數(shù)據(jù)中對(duì)應(yīng)的字段 vm.a == data.a // => true// 設(shè)置屬性也會(huì)影響到原始數(shù)據(jù) vm.a = 2 data.a // => 2// ……反之亦然 data.a = 3 vm.a // => 3當(dāng)這些數(shù)據(jù)改變時(shí)，視圖會(huì)進(jìn)行重渲染。值得注意的是只有當(dāng)實(shí)例被創(chuàng)建時(shí)就已經(jīng)存在于 data 中的屬性才是響應(yīng)式的。也就是說(shuō)如果你添加一個(gè)新的屬性，
比如：
那么對(duì) b 的改動(dòng)將不會(huì)觸發(fā)任何視圖的更新。如果你知道你會(huì)在晚些時(shí)候需要一個(gè)屬性，但是一開(kāi)始它為空或不存在，那么你僅需要設(shè)置一些初始值。
這里唯一的例外是使用 Object.freeze()，這會(huì)阻止修改現(xiàn)有的屬性，也意味著響應(yīng)系統(tǒng)無(wú)法再追蹤變化。
除了數(shù)據(jù)屬性，Vue 實(shí)例還暴露了一些有用的實(shí)例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區(qū)分開(kāi)來(lái)。例如：
var data = { a: 1 } var vm = new Vue({el: '#example',data: data })vm.$data === data // => true vm.$el === document.getElementById('example') // => true// $watch 是一個(gè)實(shí)例方法 vm.$watch('a', function (newValue, oldValue) {// 這個(gè)回調(diào)將在 `vm.a` 改變后調(diào)用 })以后你可以在 API 參考[API 參考]中查閱到完整的實(shí)例屬性和方法的列表。
1.3、生命周期
每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過(guò)一系列的初始化過(guò)程——例如，需要設(shè)置數(shù)據(jù)監(jiān)聽(tīng)、編譯模板、將實(shí)例掛載到 DOM 并在數(shù)據(jù)變化時(shí)更新 DOM 等。同時(shí)在這個(gè)過(guò)程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同階段添加自己的代碼的機(jī)會(huì)。
比如 created 鉤子可以用來(lái)在一個(gè)實(shí)例被創(chuàng)建之后執(zhí)行代碼：
也有一些其它的鉤子，在實(shí)例生命周期的不同階段被調(diào)用，如 mounted、updated和 destroyed。生命周期鉤子的 this上下文指向調(diào)用它的 Vue 實(shí)例。
注意：不要在選項(xiàng)屬性或回調(diào)上使用箭頭函數(shù)，比如 created: () => console.log(this.a) 或 vm.$watch(‘a(chǎn)’, newValue => this.myMethod())。因?yàn)榧^函數(shù)并沒(méi)有 this，this 會(huì)作為變量一直向上級(jí)詞法作用域查找，直至找到為止，經(jīng)常導(dǎo)致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯(cuò)誤。下圖展示了實(shí)例的生命周期。你不需要立馬弄明白所有的東西，不過(guò)隨著你的不斷學(xué)習(xí)和使用，它的參考價(jià)值會(huì)越來(lái)越高。
二、Vue.js路由
Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構(gòu)建單頁(yè)應(yīng)用變得易如反掌。
包含的功能有：
- 嵌入的路由/視圖表
- 正極的，基于組件的路由配置
- 路由參數(shù)，查詢，通配符
- 基于Vue.js過(guò)渡系統(tǒng)的視圖過(guò)渡效果
- 細(xì)粒度的導(dǎo)航控制
- 帶有自動(dòng)激活的CSS類的鏈接
- HTML5歷史模式或hash模式，在IE9中自動(dòng)降級(jí)
- 自定義的滾動(dòng)條行為
兩種方式：
1、直接引入
2、npm安裝方式
使用Vue.js + Vue Router創(chuàng)建單頁(yè)應(yīng)用，是非常簡(jiǎn)單的。使用Vue.js，我們已經(jīng)可以通過(guò)組合組件來(lái)組成應(yīng)用程序，當(dāng)你要把Vue Router添加進(jìn)來(lái)，我們需要做的是，將組件（組件）映射到路由（路由），然后告訴Vue Router在哪里渲染它們。下面是一個(gè)基本示例：
<!DOCTYPE html> <html><head><meta charset="utf-8"><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><title></title></head><body><div id="app"><h1>Hello App!</h1><p><!-- 使用 router-link 組件來(lái)導(dǎo)航. --><!-- 通過(guò)傳入 `to` 屬性指定鏈接. --><!-- <router-link> 默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 --><router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link></p><!-- 路由出口 --><!-- 路由匹配到的組件將渲染在這里 --><router-view></router-view></div> <script type="text/javascript">// 0. 如果使用模塊化機(jī)制編程，導(dǎo)入Vue和VueRouter，要調(diào)用 Vue.use(VueRouter)// 1. 定義 (路由) 組件。// 可以從其他文件 import 進(jìn)來(lái)const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }// 2. 定義路由// 每個(gè)路由應(yīng)該映射一個(gè)組件。 其中"component" 可以是// 通過(guò) Vue.extend() 創(chuàng)建的組件構(gòu)造器，// 或者，只是一個(gè)組件配置對(duì)象。// 我們晚點(diǎn)再討論嵌套路由。const routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar }]// 3. 創(chuàng)建 router 實(shí)例，然后傳 `routes` 配置// 你還可以傳別的配置參數(shù), 不過(guò)先這么簡(jiǎn)單著吧。const router = new VueRouter({routes // (縮寫) 相當(dāng)于 routes: routes})// 4. 創(chuàng)建和掛載根實(shí)例。// 記得要通過(guò) router 配置參數(shù)注入路由，// 從而讓整個(gè)應(yīng)用都有路由功能const app = new Vue({router}).$mount('#app')// 現(xiàn)在，應(yīng)用已經(jīng)啟動(dòng)了！</script></body> </html>通過(guò)注入路由器，我們可以在任何組件內(nèi)部通過(guò)this.$router訪問(wèn)路由器，也可以通過(guò)this.$route訪問(wèn)當(dāng)前路由：
// Home.vue export default {computed: {username() {// 我們很快就會(huì)看到 `params` 是什么return this.$route.params.username}},methods: {goBack() {window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')}} }上面的示例都常使用router實(shí)例。留意一下this.$router和router使用起來(lái)完全一樣。我們使用this.$router的原因是我們并不想在每個(gè)獨(dú)立需要封裝路由的組件中都引入路由。
三、Vue.js路由配置vue-router
3.1、動(dòng)態(tài)路由匹配
我們經(jīng)常需要把某種模式匹配到的所有路由，全都映射到同個(gè)組件。例如，我們有一個(gè) User 組件，對(duì)于所有 ID 各不相同的用戶，都要使用這個(gè)組件來(lái)渲染。那么，我們可以在 vue-router 的路由路徑中使用“動(dòng)態(tài)路徑參數(shù)”(dynamic segment) 來(lái)達(dá)到這個(gè)效果：
const User = {template: '<div>User</div>' }const router = new VueRouter({routes: [// 動(dòng)態(tài)路徑參數(shù) 以冒號(hào)開(kāi)頭{ path: '/user/:id', component: User }] })現(xiàn)在呢，像 /user/foo 和 /user/bar 都將映射到相同的路由。
一個(gè)“路徑參數(shù)”使用冒號(hào) : 標(biāo)記。當(dāng)匹配到一個(gè)路由時(shí)，參數(shù)值會(huì)被設(shè)置到 this.$route.params，可以在每個(gè)組件內(nèi)使用。于是，我們可以更新 User 的模板，輸出當(dāng)前用戶的 ID：
const User = {template: '<div>User {{ $route.params.id }}</div>' }3.2、嵌套路由
實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。同樣地，URL 中各段動(dòng)態(tài)路徑也按某種結(jié)構(gòu)對(duì)應(yīng)嵌套的各層組件，例如：
3.3、編程式導(dǎo)航
3.4、命名路由
有時(shí)候，通過(guò)一個(gè)名稱來(lái)標(biāo)識(shí)一個(gè)路由顯得更方便一些，特別是在鏈接一個(gè)路由，或者是執(zhí)行一些跳轉(zhuǎn)的時(shí)候。你可以在創(chuàng)建 Router 實(shí)例的時(shí)候，在 routes 配置中給某個(gè)路由設(shè)置名稱。
const router = new VueRouter({routes: [{path: '/user/:userId',name: 'user',component: User}] })要鏈接到一個(gè)命名路由，可以給 router-link 的 to 屬性傳一個(gè)對(duì)象：
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>這跟代碼調(diào)用 router.push() 是一回事：
router.push({ name: 'user', params: { userId: 123 }})這兩種方式都會(huì)把路由導(dǎo)航到 /user/123 路徑。
3.5、命名視圖
3.6、重定向和別名
3.7、路由組件傳遞參數(shù)
3.8、HTML5 History模式
四、數(shù)據(jù)獲取
4.1、導(dǎo)航守衛(wèi)
4.1.1、全局守衛(wèi)
4.1.2、全局解析守衛(wèi)
4.1.3、全局后置鉤子
4.1.4、路由獨(dú)享的守衛(wèi)
4.1.5、組件內(nèi)的守衛(wèi)
4.2、數(shù)據(jù)獲取
4.2.1、導(dǎo)航完成后獲取數(shù)據(jù)
4.2.2、在導(dǎo)航完成前獲取數(shù)據(jù)
…詳細(xì)的在官網(wǎng)上都有相應(yīng)的描述。
總結(jié)
以上是生活随笔為你收集整理的vue router 参数_Vue.js项目开发技术解析的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： python第一条入门程序_Python
- 下一篇： vue 传参 微信_vue-router