Vue入門 - 路由vue-router

• 7.路由vue-router
• • 7.1.場景模拟
  • • 7.1.1.編寫父元件
    • 7.1.2.編寫登入及注冊元件
    • 7.1.3.在父元件中引用
    • 7.1.5.問題
  • 7.2.vue-router簡介和安裝
  • 7.3.快速入門

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