vue路由使用

 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>