vue2.0学习之路由
下载vue-router: cnpm install vue-router --save
router/main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | /*引入所需要的组件*/ import VueRouter from 'vue-router' ; import about from "compontents/about.vue" import news from "compontents/news.vue" import Router from 'vue-router' import VueResource from 'vue-resource' ; Vue.use(VueRouter); Vue.use(VueResource); Vue.use(Router); const routes = [ //这里是routes,没有r { path: '/goods' , component: goods }, { path: '/ratings' , component: ratings }, { path: '/seller' , component: seller } ]; const router = new VueRouter({ routes, linkActiveClass: 'active' }); router.push( '/goods' ); new Vue({ el: '#app' , router, template: '<App/>' , components: { App } }) |
compontents/about.vue 与compontents/news.vue 一样
1 2 3 4 5 6 7 8 9 10 11 | <template> <div> 我是关于我们/我是新闻 </div> </template> <script> export default { } </script> |
将about.vue和news.vue链接起来
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <template> <div id= "app" > <div class = "tab" > <div class = "tab-item" > <router-link to= "/about" >关于</router-link> </div> <div class = "tab-item" > <router-link to= "/news" >新闻</router-link> </div> </div> <div> <router-view></router-view> </div> </div> </template> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步