页面的vue布局组件和嵌套路由

Container布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

< el - container > ：外层容器。当子元素中包含< el - header >或 < el - footer > 时，全部子元素会垂直上下排列，否则会水平左右排列。

< el - header> ：顶栏容器。

< el - aside >：侧边栏容器。

< el - main >：主要区域容器。

< el - footer > ：底栏容器。

基于嵌套路由，实现点击侧边栏动态更新页面的局部内容

一级路由：

嵌套路由：

嵌套路由可以使用的方法来实现一个页面中局部内容的动态更新。该布局内容到底显示什么组件，由路由地址决定。例如：

http://localhost:8080/container/button 看到Container中包含Button组件

http://localhost:8080/container/form 看到Container中包含Form组件

http://localhost:8080/container/table 看到Container中包含Table组件

实现步骤：

1、设计一套合理的嵌套路由规则。

2、准备3个组件：Button.vue 、Form.vue 、Table.vue。

3、在合适的位置，添加占位符：< router - view / >

实现点击左侧边栏菜单项，动态跳转到相应的路由

$ router 路由管理器管理所有的路由（提供了路由跳转等功能）

$ router 当前路由对象只用于描述当前路由（提供了当前路由信息的访问）

Vue-project过程相关推荐

Vue安装过程及环境配置
Vue安装过程及环境配置本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目. 通过WIN+R输入CMD打开命令行(必须是以管理员身份运行),输入: npm confi ...
Vue 实践过程中的几个问题
前言本篇是我在使用vue过程中,遇到的几个小问题和之前不了解的东西,记录下来,希望能够帮助各位踩坑.如果喜欢的话可以点波赞,或者关注一下,希望本文可以帮到大家. 本文首发于我的个人blog:obko ...
IIS部署vue前端过程（含IIS及相关配置和安装），部署遇到的问题及报错（承接vueconfig.js全局配置环境变量，跨域问题）
目录一.IIS使用安装. 二.部署准备工作三.部署前端(以vue为主) 四.问题与报错 1.HTTP 错误 404.0 - Not Found(需重写路由入口) 2.请求调用不了(需要重写请求地址 ...
vue使用过程中的一些问题
1.新建项目运行为空白页解决: new Vue({el: '#app', }) 换成 new Vue({el: '#app',render: h => h(App) }) 2.新建项目无法运行 ...
如何优雅的在Vue Project中使用vue-apollo
首先我们来熟悉下graphql的工作机制一个GraphQL查询可以包含一个或者多个操作(operation),类似于一个RESTful API.操作(operation)可以使两种类型:查询(Que ...
命令窗创建vue 项目过程
这几条命令用来向git提交转载于:https://www.cnblogs.com/vali/p/7493331.html
从零开始搭建一个vue项目 -- vue-cli/cooking-cli（一）
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...
了解如何使用Vue.js CLI
Interested in learning Vue.js? Get my ebook at vuehandbook.com 有兴趣学习Vue.js吗? 在vuehandbook.com上获取我的电子 ...
Vue CLI3 基本使用配置；
Vue CLI3 开始安装: npm install -g @vue/cli # OR yarn global add @vue/cli 创建一个项目: vue create my-project ...

Vue-project过程

页面的vue布局组件和嵌套路由

实现点击左侧边栏菜单项，动态跳转到相应的路由

Vue-project过程相关推荐

最新文章

热门文章