首页 > 代码库 > vue2.0路由
vue2.0路由
现在用vue-cli搭建的环境里面vue-router是下载好的
vue2.0路由方式和以前也有些不同
没了了map和start方法
目录结构如上图
这里有三个文件,app.vue显示,main.js控制路由,goods.vue为跳转页面
app.vue
template> <div id="app"> <v-header></v-header> <div class="tab"> <div class="tab-item"> <router-link to="/goods">商品</router-link> </div> <div class="tab-item">评论</div> <div class="tab-item">商家</div> </div> <router-view></router-view> </div> </template> <script> import header from ‘./components/header/header.vue‘; export default{ components:{ ‘v-header‘:header } }; </script> <style lang="stylus" rel="stylesheet/stylus"> #app .tab display:flex width:100% height:40px line-height:40px .tab-item flex:1 text-align center </style>
main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from ‘vue‘ import VueRouter from ‘vue-router‘ import App from ‘./App‘ import goods from ‘./components/goods/goods.vue‘; import ratings from ‘./components/ratings/ratings.vue‘; import seller from ‘./components/seller/seller.vue‘; import "./common/stylus/index.styl"; Vue.use(VueRouter); Vue.config.productionTip = false; const routers=[ {path:‘/goods‘,component:goods}, {path:‘/ratings‘,component:ratings}, {path:‘/seller‘,component:seller} ] const router=new VueRouter({ linkActiveClass:"active", mode:"history", routes:routers }); const app = new Vue({ router }).$mount(‘#app‘) new Vue({ template: ‘<App/>‘, components: { App }, router: router }).$mount(‘#app‘); router.push(‘/goods‘)
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from ‘vue‘ import VueRouter from ‘vue-router‘ import App from ‘./App‘ import goods from ‘./components/goods/goods.vue‘; import ratings from ‘./components/ratings/ratings.vue‘; import seller from ‘./components/seller/seller.vue‘; import "./common/stylus/index.styl"; Vue.use(VueRouter); Vue.config.productionTip = false; const routers=[ {path:‘/goods‘,component:goods}, {path:‘/ratings‘,component:ratings}, {path:‘/seller‘,component:seller} ] const router=new VueRouter({ linkActiveClass:"active", mode:"history", routes:routers }); const app = new Vue({ router }).$mount(‘#app‘) new Vue({ template: ‘<App/>‘, components: { App }, router: router }).$mount(‘#app‘); router.push(‘/goods‘)
vue2.0路由
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。