1 <body> 2 <div id="itany"> 3 <div> 4 <!--使用router-link组件来定义导航，to属性指定链接url--> 5 <router-link to="/home">主页</router-link> 6 <router-link to="/news">新闻</router-link> 7 </div> 8 <!--router-view用来显示路由内容--> 9 <router-view></router-view> 10 </div> 11 </body> 12 </html> 13 <script> 14 // 1.定义组件 15 var Home={ 16 template:'<h3>我是主页</h3>' 17 } 18 var News={ 19 template:'<h3>我是新闻</h3>' 20 } 21 // 2.配置路由 22 const routes=[ 23 {path:'/home',component:Home}, 24 {path:'/news',component:News}, 25 {path:'*',redirect:'/home'}//重定向，即默认的情况下打来home组件； 26 ] 27 // 3.创建路由实例 28 const router=new VueRouter({ 29 routes, 30 linkActiveClass:'active'//更新活动链接的class类名 31 }); 32 // 4.创建根实例并将路由挂载到vue实例上 33 new Vue({ 34 el:'#itany', 35 router//注入路由 36 37 }) 38 </script>