vue路由使用
Posted Carina
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于vue路由使用的主要内容，如果未能解决你的问题，请参考以下文章