vue-router页面跳转

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
}
]
})

其实现在新建的项目已经帮我们集成好了，我们只需要配置上面两部即可，直接去看文档反而，有些云里雾里。希望能给需要的人一些帮助。