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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM