阅读 659

vue-router爬坑记

简介

因为我们用Vue开发的页面是单页面应用,就相当于只有一个主的index.html,这时候我们就不能使用a标签来进行页面的切换了,所以这时候我们今天的主角Vue-Router就闪亮的登场了 Vue-Router就是我们页面的链接路径管理系统

入门初始化

我们在使用vue-cli初始化我们代码时,选择安装Vue-Router即可 我们可以在我们的项目中src>router>index.js,这里的index.js就是我们写路由的地方了,我们来解读一下里面代码是干什么用的,

PuH25j.png
而我们要是想切换其他的页面呢,只需要在后面继续写路由就行
PuHIMV.png
然后我们去新建这个页面,并编写一些东西显示出来,首先是我们的主页HelloWorld,

<router-link to="/Fond">去找二级小弟</router-link> //这里的标签就相当于 a 标签 to 后面跟的就是地址
复制代码

PuHHZF.png
在去新建Fond页面
PuHba4.png
在页面中显示
ScreenGif.gif

子路由

子路由的情况一般用在一个页面有他的基础模版,然后它下面的页面都隶属于这个模版,只是部分改变样式 在index.js组件中编写

20180712140815.png
在Fond组件中编写
20180712140913.png
我们新建load组件
20180712141030.png
在浏览器中预览
ScreenGif1.gif
我们可以在浏览器地址栏看到首页默认显示的为http://localhost:8080,
当我们点击去找fond,地址后面就加上了fond,http://localhost:8080/Fond,此时页面上就只显示fond组件里的内容,
当再点击去我小弟那里,地址栏就变成了fond/load,页面上即显示了fond组件里的内容也显示了load组件里的内容

路由传递参数

作用

接收上一级页面传过来的参数

实操

通过<router-link> 标签中的to传参 首先我们需要在Fond组件中添加

20180712142342.png
这里的name:就是我们在路由配置那里定义的名字,我们可以看前面的代码片段,它的功能相当于跳转到哪,而params:{}就是用来进行参数传递的 我们需要在Load组件中接收参数通过$route.params.参数名字
20180712142742.png

效果

我们在浏览器中看下效果

ScreenGif2.gif
我们首先点击去我小弟那里,在这里我们没有进行参数传递,所以显示不出来我们传的参数
我们点击去找三级小弟,在这里我们进行了参数传递,所以在页面上我们可以看到我们传递的值

单页面多路由

关注下面的标签,发现更多相似文章
评论