步驟 1 : vue.js 裡的路由概念
vue.js 裡的路由相當于就是局部重新整理。點選左邊的菜單，右邊的内容在不重新整理整個頁面的情況下，進行局部重新整理
步驟 2 : vue-router.min.js
為了實作路由，需要一個額外的庫： vue-router.min.js
步驟 3 : 路由代碼講解
<script src="http://how2j.cn/study/vue.min.js"></script>
<script src="http://how2j.cn/study/vue-router.min.js"></script>
<head>
<style>
a{
text-decoration: none;
}
a.router-link-active{
/* color:blue; */
background-color: lightGray;
}
div.menu{
border:1px solid gray;
float:left;
}
div.menu a{
display:block;
}
div.workingRoom{
margin-left:100px;
}
div#app{
width:500px;
padding:10px;
margin:10px auto;
}
</style>
</head>
<div id="app">
<div class="menu">
<!--
router-link 相當于就是超鍊
to 相當于就是 href
-->
<router-link to="/user">使用者管理</router-link>
<router-link to="/product">産品管理</router-link>
<router-link to="/order">訂單管理</router-link>
</div>
<div class="workingRoom">
<!--
點選上面的/user,那麼/user 對應的内容就會顯示在router-view 這裡
-->
<router-view></router-view>
</div>
</div>
<script>
/*
* 申明三個模闆( html 片段 )
*/
var user = { template: '<p>使用者管理頁面的内容</p>' };
var second = { template: '<p>産品管理頁面的内容</p>' };
var order = { template: '<p>訂單管理頁面的内容</p>' };
/*
* 定義路由
*/
var routes = [
{ path: '/', redirect: '/user'}, // 這個表示會預設渲染 /user，沒有這個就是空白
{ path: '/user', component: user },
{ path: '/product', component: second },
{ path: '/order', component: order }
];
/*
* 建立VueRouter執行個體
*/
var router = new VueRouter({
routes:routes
});
/*
* 給vue對象綁定路由
*/
new Vue({
el:"#app",
router
})
</script>
![Element 中遠端搜尋的功能實作[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)