vue组件与路由的使用步骤

router:根据不同的地址跳转到不同的页面
一、vue-router的使用
1.下载路由模块      npm vue-router --save
2.在router.js中
　　先引入路由    import Router from 'vue-router'
　　接着通过use在vue全局注册使用    Vue.use（Router）
　　最后将路由表导出  export default new router({ })

3.在main.js中引入路由组件   import router from './router'
4.以参数的形式写到根目录中 在vue实例对象中声明router

5.最后在App.vue的模板中设置路由出口    <router-view></router-view>

二、添加组件步骤：

1.在src的components下添加组件 apple.vue
2.在app.vue的script标签
　　引入 新添的组件 import apple from './componets/apple'
　　在data后注册每个组件 components:{apple}
　　在template标签里用组件名写一个标签<apple></apple>

3.通过命令npm run dev 运行项目查看组件是否添加成功

三、将组件添加到路由表的步骤：
1.安装路由 npm install vue-router --save
2.将components里的组件引入配置到router.js中
　　先引入组件    import...
　　再配置路由路径
3.在main.js中使用router
　　先引入路由   import...
　　再在vue实例中指定router
4.在App.vue中模板中添加路由链接 router-link和出口router-view