1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>hello world</title> 6 </head> 7 <body> 8 <div id="app"> 9 <div> 10 <!-- 4、<router-link>默认会被渲染成一个 `<a>` 标签 ,to指令跳转到指定路径 --> 11 <router-link to="/home">Go to Home</router-link> 12 <router-link to="/about">Go to About</router-link> 13 </div> 14 15 <!-- 5、在页面上使用<router-view></router-view>标签，用于渲染匹配的组件 --> 16 <router-view></router-view> 17 </div> 18 19 <!-- 0、引入依赖库（类库需要下载） --> 20 <script src="vue.min.js"></script> 21 <script src="vue-router.js"></script> 22 23 <script type="text/javascript"> 24 /* 1、创建组件 */ 25 const Home = Vue.extend({ 26 template: '<div><h1>Home</h1><p>{{msg}}</p></div>', 27 data: function() { 28 return { 29 msg: 'Hello, vue router!' 30 } 31 } 32 }); 33 const About = Vue.extend({ 34 template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>' 35 }); 36 37 // 2. 创建 router 实例，然后传 `routes`路由映射 配置 38 const router = new VueRouter({ 39 routes: [ 40 { path: '/home', component: Home }, 41 { path: '/about', component: About }, 42 { path: '/', component: Home } //设置默认路径 43 ]} 44 ); 45 46 // 3. 创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能 47 const vm = new Vue({ 48 router: router 49 }).$mount('#app'); 50 51 // 现在，应用已经启动了！ 52 </script> 53 </body> 54 </html>
