简介
因为我们用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.参数名字
效果
我们在浏览器中看下效果
我们首先点击去我小弟那里,在这里我们没有进行参数传递,所以显示不出来我们传的参数
我们点击去找三级小弟,在这里我们进行了参数传递,所以在页面上我们可以看到我们传递的值
单页面多路由
原文地址：https://www.cnblogs.com/web-chuanfa/p/9304582.html