vue.js的路由功能由vue-router提供
實(shí)現(xiàn)以下功能：
路由.gif
登錄和注冊兩個按鈕分別對應(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)的組件
});
路由
