首页 > 其他 > 详细

Vue基础篇 (1) —— vue-router的使用

时间:2019-12-19 16:26:19      阅读:115      评论:0      收藏:0      [点我收藏+]

Vue-Cli中vue-router的使用

一、创建vue-cli的项目

npm create myproject

  vue create 为vue.js 3.0构建项目的命令,2.0版本可以通过vue init webpack myproject

二、安装vue-router

npm install vue-router --save

三、在目录结构的src下创建router文件夹,并创建index.js作为出口文件,同时在components文件下新建两个组件

技术分享图片

四、在router/index.js配置相关路由

  这里我配置了三个路由,‘/hello‘,‘/a‘,‘/b‘,并且把 ‘/‘ 重定向为 ‘/hello’

技术分享图片

 五、在src/main.js中将路由实例挂载到vue根实例上,使得整个应用都有路由功能

 技术分享图片

六、在src/App.vue中使用router-link 标签实现跳转路由、使用router-view来实现路由显示

技术分享图片

七、最终效果

 技术分享图片

Vue基础篇 (1) —— vue-router的使用

原文:https://www.cnblogs.com/lcxcsy/p/12067225.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!