vue-router页面跳转
Vue-Router的教程地址https://router.vuejs.org/zh-cn/
我们在建立项目的时候命令行如下:
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
最新的项目已经自动安装了vue-router 下面介绍步骤
一、vue组件中添加标签,格式如下
<div class="tab">
<div class="tab-item">
<router-link to="/goods">商品</router-link></div>
<div class="tab-item">
<router-link to="/rating">评论</router-link></div>
<div class="tab-item">
<router-link to="/seller">商家</router-link></div>
</div>
<router-view></router-view>
二、router文件夹下的index.js文件
export default new Router({
routes: [
{
path: '/goods',
component: Goods
},
{
path: '/rating',
component: Ratings
},
{
path: '/seller',
component: Seller
}
]
})
其实现在新建的项目已经帮我们集成好了,我们只需要配置上面两部即可,直接去看文档反而,有些云里雾里。希望能给需要的人一些帮助。