當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue router 参数_Vue.js项目开发技术解析

發布時間：2023/12/2 vue 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue router 参数_Vue.js项目开发技术解析小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Vue.js項目開發技術解析

一、Vue.js實例

在一個Vue.js工程中，用于顯示內容最基層的實例稱之為根實例。通過該實例可以進行頁面或組件的更新和顯示。對于項目本身而言，無論是什么樣的頁面，都要基于該根實例進行顯示。

1.1、何為構造器

對于Vue.js項目來說，每個應用的起步都需要使用Vue.js的構造函數創建一個根實例，如下：

// 邏輯部分代碼，建立Vue實例 var vm = new Vue({//選項 })

這里的vm其實是ViewModel的簡稱。雖然Vue.js并不是完全遵循MVVM模型，但是Vue.js的設計無疑受到了它的啟發。

在實例化Vue.js時，需要傳入一個選項對象，它包括數據、模板、掛載元素、方法和生命周期鉤子等選項，全部的選項可以在API文檔中查看。
對于已經創建的相關構造器，可以擴展為其他構造器，相當于對某一構造器的繼承，從而達到可復用組件構造器的目的。
演示代碼如下：

var MyComponent = Vue.extend({// 擴展選項 }) // 所有的 MyComponent 實例都將以預定義的擴展選項被創建 var myComponentInstance = new MyComponent()

1.2、實例的屬性和方法

當一個 Vue 實例被創建時，它將 data 對象中的所有的屬性加入到 Vue 的響應式系統中。當這些屬性的值發生改變時，視圖將會產生“響應”，即匹配更新為新的值。

// 我們的數據對象 var data = { a: 1 }// 該對象被加入到一個 Vue 實例中 var vm = new Vue({data: data })// 獲得這個實例上的屬性 // 返回源數據中對應的字段 vm.a == data.a // => true// 設置屬性也會影響到原始數據 vm.a = 2 data.a // => 2// ……反之亦然 data.a = 3 vm.a // => 3

當這些數據改變時，視圖會進行重渲染。值得注意的是只有當實例被創建時就已經存在于 data 中的屬性才是響應式的。也就是說如果你添加一個新的屬性，
比如：

vm.b = 'hi'

那么對 b 的改動將不會觸發任何視圖的更新。如果你知道你會在晚些時候需要一個屬性，但是一開始它為空或不存在，那么你僅需要設置一些初始值。
這里唯一的例外是使用 Object.freeze()，這會阻止修改現有的屬性，也意味著響應系統無法再追蹤變化。

var obj = {foo: 'bar' }Object.freeze(obj)new Vue({el: '#app',data: obj }) <div id="app"><p>{{ foo }}</p><button v-on:click="foo = 'baz'">Change it</button> </div>

除了數據屬性，Vue 實例還暴露了一些有用的實例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區分開來。例如：

var data = { a: 1 } var vm = new Vue({el: '#example',data: data })vm.$data === data // => true vm.$el === document.getElementById('example') // => true// $watch 是一個實例方法 vm.$watch('a', function (newValue, oldValue) {// 這個回調將在 `vm.a` 改變后調用 })

以后你可以在 API 參考[API 參考]中查閱到完整的實例屬性和方法的列表。

1.3、生命周期

每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 并在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數，這給了用戶在不同階段添加自己的代碼的機會。
比如 created 鉤子可以用來在一個實例被創建之后執行代碼：

new Vue({data: {a: 1},created: function () {// `this` 指向 vm 實例console.log('a is: ' + this.a)} }) // => "a is: 1"

也有一些其它的鉤子，在實例生命周期的不同階段被調用，如 mounted、updated和 destroyed。生命周期鉤子的 this上下文指向調用它的 Vue 實例。

注意：不要在選項屬性或回調上使用箭頭函數，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因為箭頭函數并沒有 this，this 會作為變量一直向上級詞法作用域查找，直至找到為止，經常導致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯誤。

下圖展示了實例的生命周期。你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。

二、Vue.js路由

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構建單頁應用變得易如反掌。
包含的功能有：

嵌入的路由/視圖表

正極的，基于組件的路由配置

路由參數，查詢，通配符

基于Vue.js過渡系統的視圖過渡效果

細粒度的導航控制

帶有自動激活的CSS類的鏈接

HTML5歷史模式或hash模式，在IE9中自動降級

自定義的滾動條行為

兩種方式：

1、直接引入
2、npm安裝方式

使用Vue.js + Vue Router創建單頁應用，是非常簡單的。使用Vue.js，我們已經可以通過組合組件來組成應用程序，當你要把Vue Router添加進來，我們需要做的是，將組件（組件）映射到路由（路由），然后告訴Vue Router在哪里渲染它們。下面是一個基本示例：

<!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 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. 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)// 1. 定義 (路由) 組件。// 可以從其他文件 import 進來const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }// 2. 定義路由// 每個路由應該映射一個組件。其中"component" 可以是// 通過 Vue.extend() 創建的組件構造器，// 或者，只是一個組件配置對象。// 我們晚點再討論嵌套路由。const routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar }]// 3. 創建 router 實例，然后傳 `routes` 配置// 你還可以傳別的配置參數, 不過先這么簡單著吧。const router = new VueRouter({routes // (縮寫) 相當于 routes: routes})// 4. 創建和掛載根實例。// 記得要通過 router 配置參數注入路由，// 從而讓整個應用都有路由功能const app = new Vue({router}).$mount('#app')// 現在，應用已經啟動了！</script></body> </html>

通過注入路由器，我們可以在任何組件內部通過this.$router訪問路由器，也可以通過this.$route訪問當前路由：

// Home.vue export default {computed: {username() {// 我們很快就會看到 `params` 是什么return this.$route.params.username}},methods: {goBack() {window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')}} }

上面的示例都常使用router實例。留意一下this.$router和router使用起來完全一樣。我們使用this.$router的原因是我們并不想在每個獨立需要封裝路由的組件中都引入路由。

三、Vue.js路由配置vue-router

3.1、動態路由匹配

我們經常需要把某種模式匹配到的所有路由，全都映射到同個組件。例如，我們有一個 User 組件，對于所有 ID 各不相同的用戶，都要使用這個組件來渲染。那么，我們可以在 vue-router 的路由路徑中使用“動態路徑參數”(dynamic segment) 來達到這個效果：

const User = {template: '<div>User</div>' }const router = new VueRouter({routes: [// 動態路徑參數以冒號開頭{ path: '/user/:id', component: User }] })

現在呢，像 /user/foo 和 /user/bar 都將映射到相同的路由。

一個“路徑參數”使用冒號 : 標記。當匹配到一個路由時，參數值會被設置到 this.$route.params，可以在每個組件內使用。于是，我們可以更新 User 的模板，輸出當前用戶的 ID：

const User = {template: '<div>User {{ $route.params.id }}</div>' }

3.2、嵌套路由

實際生活中的應用界面，通常由多層嵌套的組件組合而成。同樣地，URL 中各段動態路徑也按某種結構對應嵌套的各層組件，例如：

3.3、編程式導航

3.4、命名路由

有時候，通過一個名稱來標識一個路由顯得更方便一些，特別是在鏈接一個路由，或者是執行一些跳轉的時候。你可以在創建 Router 實例的時候，在 routes 配置中給某個路由設置名稱。

const router = new VueRouter({routes: [{path: '/user/:userId',name: 'user',component: User}] })

要鏈接到一個命名路由，可以給 router-link 的 to 屬性傳一個對象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

這跟代碼調用 router.push() 是一回事：

router.push({ name: 'user', params: { userId: 123 }})

這兩種方式都會把路由導航到 /user/123 路徑。

3.5、命名視圖

3.6、重定向和別名

3.7、路由組件傳遞參數

3.8、HTML5 History模式

四、數據獲取

4.1、導航守衛

4.1.1、全局守衛

4.1.2、全局解析守衛

4.1.3、全局后置鉤子

4.1.4、路由獨享的守衛

4.1.5、組件內的守衛

4.2、數據獲取

4.2.1、導航完成后獲取數據

4.2.2、在導航完成前獲取數據

…詳細的在官網上都有相應的描述。

總結

以上是生活随笔為你收集整理的vue router 参数_Vue.js项目开发技术解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python第一条入门程序_Python
下一篇： html5倒计时秒杀怎么做,vue 设