vue.js的路由功能由vue-router提供

實(shí)現(xiàn)以下功能：

路由.gif

登錄和注冊兩個(gè)按鈕分別對應(yīng)login和register路由

實(shí)現(xiàn)步驟：

• 導(dǎo)入vue-router庫

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

• 使用router-link組件生成點(diǎn)擊導(dǎo)航

<router-link to="/login" tag="button" class="btn btn-success">登錄</router-link>
<router-link to="/register" tag="button" class="btn btn-danger col-lg-offset-2">注冊</router-link>

router-link

• 使用router-view組件顯示匹配到的組件

<router-view></router-view>

• 創(chuàng)建相關(guān)組件

let login = {
    template: '#login',
};
let register = {
    template: '#register',
};

• 創(chuàng)建路由router實(shí)例

let router = new VueRouter({
    routes: [ // 路由匹配規(guī)則
        { path: '/', redirect: '/login' },
        { path: '/login', component: login },
        { path: '/register', component: register },
    ],
});

• 通過router屬性使用路由規(guī)則

let vm = new Vue({
    el: "#app",
    data: {},
    router: router // 用于監(jiān)聽url地址的變化，然后展示對應(yīng)的組件
});

具體代碼

路由

更多vue.js的有趣實(shí)例，請點(diǎn)擊移步至目錄