非2.0的
vue2.0還有vue-router2.0的改變還是挺大的
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用於構建單頁面應用。vue的單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來。傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。
現在以一個簡單的單頁面應用開啟vue-router之旅，這個單頁面應用有兩個路徑：/home和/about，與這兩個路徑對應的是兩個組件Home和About。
1. 創建組件
首先引入vue.js和vue-router.js：
<script src="js/vue.js"></script> <script src="js/vue-router.js"></script>
然后創建兩個組件構造器Home和About：
// 定義組件 var Home = Vue.extend({ template: '<div><h1>Home</h1><p>{{msg}}</p></div>', data: function() { return { msg: 'Hello, vue router!' } } }) var About = Vue.extend({ template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>' })
2. 創建Router
var router = new VueRouter()
調用構造器VueRouter，創建一個路由器實例router。
3. 映射路由
router.map({ '/home': { component: Home }, '/about': { component: About } })
調用router的map方法映射路由，每條路由以key-value的形式存在，key是路徑，value是組件。
例如：'/home'是一條路由的key，它表示路徑；{component: Home}則表示該條路由映射的組件。
4. 使用v-link指令
<div class="content"> <!-- 使用指令 v-link 進行導航。 --> <a class="select" v-link="{ path: '/home' }">Home</a> <a class="select" v-link="{ path: '/about' }">About</a> </div>
在a元素上使用v-link指令跳轉到指定路徑。
5. 使用<router-view>標簽
<router-view></router-view>
在頁面上使用<router-view></router-view>標簽，它用於渲染匹配的組件。
6. 啟動路由
var App = Vue.extend({}) router.start(App, '#app')
路由器的運行需要一個根組件，router.start(App, '#app') 表示router會創建一個App實例，並且掛載到#app元素。
注意：使用vue-router的應用，不需要顯式地創建Vue實例，而是調用start方法將根組件掛載到某個元素。
http://blog.csdn.net/sinat_17775997/article/details/52549123
完整代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>router</title> <style type="text/css"> html,body{ width: 100%; height: 100% } #app{ width: 60%; height: 100%; margin: 0 auto; } .content{ width: 300px; height: 50px; } .select{ display: inline-block; line-height: 50px; padding: 0 30px; font-size: 20px; background-color: #ffffff; border: 1px solid #ecf0f1; text-align: center; color: #555555; text-decoration:none; } </style> <script src="vue.js"></script> <script src="vue-router.js"></script> </head> <body> <div id="app"> <h1 class="title">Welcome!</h1> <div class="content"> <!-- 使用指令 v-link 進行導航。 --> <a class="select" v-link="{ path: '/home' }">Home</a> <a class="select" v-link="{ path: '/about' }">About</a> </div> <!-- 路由外鏈 --> <router-view></router-view> </div> <script type="application/javascript"> // 定義組件 var Home = Vue.extend({ template: '<div><h1>Home</h1><p>{{msg}}</p></div>', data: function() { return { msg: 'Hello, vue router!' } } }) var About = Vue.extend({ template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>' }) // 創建一個路由器實例 // 創建實例時可以傳入配置參數進行定制，為保持簡單，這里使用默認配置 var router = new VueRouter() // 定義路由規則 // 每條路由規則應該映射到一個組件。這里的“組件”可以是一個使用 Vue.extend // 創建的組件構造函數，也可以是一個組件選項對象。 router.map({ '/home': { component: Home }, '/about': { component: About } }) router.redirect({ '/': '/home' }) // 路由器需要一個根組件。 // 出於演示的目的，這里使用一個空的組件，直接使用 HTML 作為應用的模板 var App = Vue.extend({}) // 啟動應用！ // 路由器會創建一個 App 實例，並且掛載到選擇符 #app 匹配的元素上。 router.start(App, '#app') </script> </body> </html>