vue-router是单页应用子页面的跳转机制,下面来说说vue-router的使用方法
1.安装路由 npm install -save-dev vue-router
2.路由配置 在main.js中引入vue和vue-router
import Vue from 'vue';
vue.use(router);
3.将要跳转的路由添加到路由对象的子对象中, router.js代码如下
import Vue from 'vue';
import VueRouter from 'vue-router';
import goods from './components/goods/goods.vue';
import ratings from './components/ratings/ratings.vue';
import seller from './components/seller/seller.vue';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
linkActiveClass: 'active',
routes: [{
path: '/goods', component: goods
}, {
path: '/ratings', component: ratings
}, {
path: '/seller', component: seller
}, {
path: '*', redirect: '/goods'
}]
});
export default router;
4.路由引入
import router from './router';
再将router加到当前vue实例中,main.js的代码如下
import Vue from 'vue';
import App from './App';
import router from './router';
import VueResource from 'vue-resource';
import './common/stylus/index.styl';
Vue.use(router);
Vue.use(VueResource);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
eventHub: new Vue(),
template: '<App/>',
components: { App }
});
5.在主vue中,使用router-link和router-view
router-link是跳转链接的组件,router-view是显示内容的组件,是点击部分与显示部分,两者一一对应
App.vue中的结构如下
<div>
<v-header :seller="seller"></v-header>
<div class="tab">
<div class="tab-item border-1px">
<router-link to="/goods">商品</router-link>
</div>
<div class="tab-item">
<router-link to="/ratings">评论</router-link>
</div>
<div class="tab-item">
<router-link to="/seller">商家</router-link>
</div>
</div>
<keep-alive>
<router-view :seller="seller"></router-view>
</keep-alive>
</div>
<keep-alive>标签是为了防止页面返回时多次重绘和刷新,从而保留页面信息