http://jsfiddle.net/yyx990803/xgrjzsup/
建立路由
引入 vue.js 及 vue-router（npm方式）
impor vue from? ‘ vue ’
import vueRouter from ‘ vue-router ’
vue.use( vueRouter );
const.router = new vueRouter( );
1. 建立單個路由：
router.map({
????? '/view-a' : { component : ViewA },
????? '/view-b' : { compinent : ViewB }
});
export default router;? //? 將路由導出
2.嵌套路由： / a / b
router.map({
?????? ' /a ' : { component : A ,
?????????????????? subRoutes:{
????????????????????????? ' /b ' : {
????????????????????????????????? component : B
???????????????????? }? } }
})
靜態路由的使用
1. HTML
?? 1.引入 vue.js 及 vue - router.js
??? 2.<div>
<router-link to = "/foo"> xxx </router-link>
<router-link to ="/bar"> yyy </router-link>
注意：<router-link>對應的路由匹配成功，將自動設置 class -> .router-link-active
? ? 編程式導航：<router-link>為聲明式導航，router.push為編程式導航
??? 當點擊<router-link>時，router.push會在函數內部執行。
??? 1.router.push 向history棧添加一個新的記錄。當用戶點擊瀏覽器后退按鈕時，則回到之前的 url
??? 2.router.replace 和router.push不同，它不像history中添加新記錄，替換掉當前的history記錄
??? 3.router.go( n )，參數 n 是一個整數，在 history 記錄中向前或后退多少步。（正數為向前，負數為后退）
3.渲染
<router-view></router-view>? 路由匹配到的組件渲染在這里
??????? </div>
2. js
?1.組件：
?const foo = { template : '<div> foo </div>' };
?const bar = {template: '<div> bar </div>' }? ;
? 2.路由：
?const routes = [
???? { path : '/foo' ,component : foo },
???? { path : '/bar' ,compinent : bar}
]
3.渲染到頁面上
const router = new VueRouter({ routers })
const app = new vue({ router }).$mount(" #app ");
路由命名
https://github.com/vuejs/vue-router/blob/next/examples/named-routes/app.js?
如果需要通過命名的方式來識別一個路由，可以在routes配置中添加 name 一項。
