vue-router爬坑记

Posted 2020-12-04 web-chuanfa

简介

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

入门初始化

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

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

 

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

 

在去新建Fond页面在页面中显示

 

子路由

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

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

 

路由传递参数

作用

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

实操

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

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

 

效果

我们在浏览器中看下效果

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

 

单页面多路由