vue2.0 和 vue1.0 路由的語法還是有點稍微的差別，下面介紹一下vue-router 2的簡單實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <div id="app"> <div> <!-- 4、<router-link>默認會被渲染成一個 `<a>` 標簽 ,to指令跳轉到指定路徑 --> <router-link to="/home">Go to Home</router-link> <router-link to="/about">Go to About</router-link> </div> <!-- 5、在頁面上使用<router-view></router-view>標簽，用於渲染匹配的組件 --> <router-view></router-view> </div> <!-- 0、引入依賴庫 --> <script src="../js/vue.min.js"></script> <script src="../js/vue-router.min.js"></script> <script type="text/javascript"> /* 1、創建組件 */ const Home = Vue.extend({ template: '<div><h1>Home</h1><p>{{msg}}</p></div>', data: function() { return { msg: 'Hello, vue router!' } } }); const About = Vue.extend({ template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>' }); // 2. 創建 router 實例，然后傳 `routes`路由映射 配置 const router = new VueRouter({ routes: [ { path: '/home', component: Home }, { path: '/about', component: About }, { path: '/', component: Home } //設置默認路徑 ] }); // 3. 創建和掛載根實例。記得要通過 router 配置參數注入路由，從而讓整個應用都有路由功能 const vm = new Vue({ router: router }).$mount('#app'); // 現在，應用已經啟動了！ </script> </body> </html>
運行結果如下：
點擊不同的鏈接，切換到不同組件，顯示組件的相應內容
更多vue-router 2 的使用方法，請單擊這里