
vue-router路由 学习笔记
发布日期:2021-05-06 08:37:56
浏览次数:7
分类:技术文章
本文共 1597 字,大约阅读时间需要 5 分钟。
vue-router路由
狂神视频教程
https://www.bilibili.com/video/BV18E411a7mC?p=15第一步 使用vue-cli搭建vue程序 搭建一个vue-cli 脚手架完整包 (步骤一样,本示例将 名称调整为myvue02router )
https://blog.csdn.net/wei198621/article/details/116431613狂神步骤截图


示例步骤
执行 install vue-router
C:\workspace\workspace_front\vue\vue狂神\myvue02router>cnpm install vue-router --save-dev
step1 删除 component 目录下HelloWorld 相关内容删除
1.component 目录下HelloWorld.vue
2.删除app.vue 下关于HelloWorld.vue的引入step2 component 目录下方 自定义组件
step3 定义 main 及 content01
main.vue
首页
content01.vue
this is a content01
step4 编写 router/index.js 路由表文件
import Vue from 'vue'import VueRouter from 'vue-router'import Main from '../components/main'import Content01 from '../components/content01'//安装路由Vue.use(VueRouter);//配置导出路由export default new VueRouter({ routes:[ { path: '/content01', //路由路径 name: 'content01', component: Content01 //跳转的组件 }, { path: '/main', //路由路径 name: 'main', component: Main //跳转的组件 } ]});
step5 main.js 中配置路由
import Vue from 'vue'import App from './App'//import VueRouter from 'vue-router' //router/index.js 中有 import VueRouter from 'vue-router' ,所以此处注释import router from './router' //自动扫描文件夹下的路由配置,默认找router/index.js 文件Vue.config.productionTip = false//显示声明使用VueRouter//Vue.use(VueRouter) //router/index.js 中有 Vue.use(VueRouter); ,所以此处注释new Vue({ el: '#app', router, //配置路由 components: { App }, template: ''})
app.vue 中使用路由
Gousheng study Kuangshen
首页 内容页
效果
发表评论
最新留言
做的很好,不错不错
[***.243.131.199]2025年03月31日 15时00分31秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
考研成绩公布后,这个表情冲上热搜第一!低分就是失败吗?
2019-03-03
【19调剂】石家庄铁道大学2019年接收硕士研究生调剂公告(非全日制)
2019-03-03
【19调剂】南京中医药大学关于接收2019年部分专业硕士研究生调剂的通知(四)...
2019-03-03
平均分392分!某985计算机专硕复试线暴涨!
2019-03-03
最全的优秀【编程书籍】推荐列表!
2019-03-03
为何二战考生成功率远远大于应届?
2019-03-03
哈尔滨工业大学2019初试真题 已更新在GitHub
2019-03-03
【20保研】南开大学人工智能学院2019年全国优秀大学生夏令营
2019-03-03
计算机专业【本科生】毕业还不如【专科生】?
2019-03-03
2020考研英语一、英语二大纲新增英语词汇汇总
2019-03-03
暑假即将过去一半,英语词汇没记住多少怎么办?
2019-03-03
2020考研数学一、二、三大纲原文汇总
2019-03-03
考研408联盟新添一所985!某知名大学专业课改用408!
2019-03-03
复旦女博士被“送”5篇论文后要分手,代写情夫自杀?复旦大学深夜回应!
2019-03-03
最有钱的大学是哪个?教育部直属高校公布2018年决算
2019-03-03
408的逆袭!武汉大学所有计算机/软件专业都改为408!
2019-03-03
这九种数学题,你会做吗?
2019-03-03
408又多一所学校!广东某大学专业课改为408!
2019-03-03
难以置信!疯狂刷政治题抵不过这些小技巧
2019-03-03
【报名问题】考研现场确认时发现报考点选错了怎么办?
2019-03-03