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