原文地址：Vue路由vue-router

7.路由vue-router

7.1.場景模擬

現在我們來實現這樣一個功能：

一個頁面，包含登錄和注冊，點擊不同按鈕，實現登錄和注冊頁切換：

7.1.1.編寫父組件

為了讓接下來的功能比較清晰，我們先新建一個文件夾：src

然后新建一個HTML文件，作為入口：index.html

然后編寫頁面的基本結構：

<div id="app"><span>登錄</span><span>注冊</span><hr/><div>登錄頁/注冊頁</div> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app"}) </script>

樣式：

7.1.2.編寫登錄及注冊組件

接下來我們來實現登錄組件，以前我們都是寫在一個文件中，但是為了復用性，開發中都會把組件放入獨立的JS文件中，我們新建一個user目錄以及login.js及register.js：

編寫組件，這里我們只寫模板，不寫功能。

login.js內容如下：

const loginForm = {template:'\<div>\<h2>登錄頁</h2> \用戶名：<input type="text"><br/>\密碼：<input type="password"><br/>\</div>\' }

register.js內容：

const registerForm = {template:'\<div>\<h2>注冊頁</h2> \用&ensp;戶&ensp;名：<input type="text"><br/>\密&emsp;&emsp;碼：<input type="password"><br/>\確認密碼：<input type="password"><br/>\</div>\' }

7.1.3.在父組件中引用

<div id="app"><span>登錄</span><span>注冊</span><hr/><div><!--<loginForm></loginForm>--><!--疑問：為什么不采用上面的寫法？由于html是大小寫不敏感的，如果采用上面的寫法，則被認為是<loginform></loginform>所以，如果是駝峰形式的組件，需要把駝峰轉化為“-”的形式--><login-form></login-form><register-form></register-form></div> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script src="user/login.js"></script> <script src="user/register.js"></script> <script type="text/javascript">var vm = new Vue({el: "#app",components: {loginForm,registerForm}}) </script>

效果：

7.1.5.問題

我們期待的是，當點擊登錄或注冊按鈕，分別顯示登錄頁或注冊頁，而不是一起顯示。

但是，如何才能動態加載組件，實現組件切換呢？

雖然使用原生的Html5和JS也能實現，但是官方推薦我們使用vue-router模塊。

7.2.vue-router簡介和安裝

使用vue-router和vue可以非常方便的實現 復雜單頁應用的動態路由功能。

官網：https://router.vuejs.org/zh-cn/

使用npm安裝：npm install vue-router --save

在index.html中引入依賴：

<script src="../node_modules/vue-router/dist/vue-router.js"></script>

7.3.快速入門

新建vue-router對象，并且指定路由規則：

// 創建VueRouter對象 const router = new VueRouter({routes:[ // 編寫路由規則{path:"/login", // 請求路徑component:loginForm // 組件名稱},{path:"/register",component:registerForm},] })

• 創建VueRouter對象，并指定路由參數
• routes：路由規則的數組，可以指定多個對象，每個對象是一條路由規則，包含以下屬性：
  • path：路由的路徑
  • component：組件名稱

在父組件中引入router對象：

var vm = new Vue({el:"#app",components:{// 引用登錄和注冊組件loginForm,registerForm},router // 引用上面定義的router對象 })

頁面跳轉控制：

<div id="app"><!--router-link來指定跳轉的路徑--><span><router-link to="/login">登錄</router-link></span><span><router-link to="/register">注冊</router-link></span><hr/><div><!--vue-router的錨點--><router-view></router-view></div> </div>

• 通過<router-view>來指定一個錨點，當路由的路徑匹配時，vue-router會自動把對應組件放到錨點位置進行渲染
• 通過<router-link>指定一個跳轉鏈接，當點擊時，會觸發vue-router的路由功能，路徑中的hash值會隨之改變

效果：

注意：單頁應用中，頁面的切換并不是頁面的跳轉。僅僅是地址最后的hash值變化。

事實上，我們總共就一個HTML：index.html

總結

以上是生活随笔為你收集整理的Vue—基础概念—路由（vue-router）的全部內容，希望文章能夠幫你解決所遇到的問題。

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