【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的模板中设置路由出口

二、添加组件步骤：

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

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