vue中的router-view

- 基础使用
- 小剧场
基础使用
vue-router是vue中的路由,使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。
vue-router的官方文档:https://router.vuejs.org/zh/guide/
在vue文件中,即通过<router-view></router-view>
或者<router-view />
来渲染路由匹配到的组件。
路由文件index.js中:
App.vue文件中:
那么在浏览器地址栏访问根路径 “http://localhost:8080/” 时,页面就会渲染Home组件;访问 “http://localhost:8080/about” 时,页面就会渲染About组件,从而实现了组件的动态渲染。
小剧场
在真实项目中,router-view不仅仅只用于App.vue文件中,还会用于整体布局文件。如layout.vue文件,就是为了实现网站头、尾、导航栏、内容区分隔,使切换路由时只变换内容区,头、尾、导航栏等公共部分不做切换。
这时,路由文件中就会出现“children”子路由:
Layout.vue文件中:
此处,渲染顺序即为:在浏览器访问项目根路径时,App.vue先渲染Layout组件,然后再有Layout组件渲染index组件。
相当于layout组件是index.vue(首页)的父组件,此处还可以使用父子组件传值的方式,传递参数。
相当于可以把layout页面当作一个中间页面,来判断一些参数,跳转到其他页面。
我在项目中实现不同工单页面的跳转时,就用到了这个特性。
在待办跳转逻辑中,在第一步后台只能识别这是一个工单,由于有多种工单类型,为了便于后台配置跳转路由,所有工单统一配置这个路由(虚拟路由,没有跳转效果),前台得到这个路由值,进行逻辑判断,再次调用后台服务查询配置表,确认具体是哪种类型的工单,确认应该跳转哪个页面。
实现如下:
Index.vue文件中:
Layout.vue文件中: