vue-router(配置子路由--单页面多路由区域操作)
1.配置子路由:
import Post from "@components/Post"
export default new Router({
routers:[
{
path:'/',
component:Pos
},
{//配置自由路
path:'/com',
compontent:Com,
children:[
{
path:'/'
},
{
path:'com',
component:Com
}
]
}
]
})
2.单页面多路由区域操作(页面出现多个router-view --通过name)
<router-view></router-view>
<router-view name="main"></router-view>
路由配置:
export default new Router({
routers:[
path:'/',
compontents:{
default:Def,
main:Main
}
]
});
配置中compontents:{}对象;
vue-router(配置子路由--单页面多路由区域操作)的更多相关文章
- vue router 配置默认页/404页面
*号通配404默认页面
- Vue 子路由 与 单页面多路由 的区别
本文地址:http://www.cnblogs.com/veinyin/p/7911292.html 最近学完了基础课程,打算整理一波笔记,对基本概念梳理一遍,惊觉对子路由和单页面多路由混淆的一塌糊涂 ...
- 基于laravel5.4 vue 和vue-element搭建的单页面后台CMS
介绍 该项目后台是基于vue和laravel搭建的单页面CMS系统,包含了文章管理,权限管理,用户管理等基本模块. 前台使用了传统web技术,laravel渲染搭建了个博客系统 github地址:ht ...
- [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
- 使用react-router实现单页面应用路由
这是Webpack+React系列配置过程记录的第二篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- vue,react,angular本地配置nginx 环境单页面应用
一.起因:项目使用VUE,和react.构建单页面应用.在nginx的环境下只有一个index.html入口.这时候默认能够访问到vue,和react 路由 配置中的首页.内部连接也能够跳转但是不能给 ...
- webpack配合vue.js实现完整的单页面demo
本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...
- nignx部署Vue单页面刷新路由404问题解决
官网说明: https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E8%AD%A6%E5%91%8A 在linux下搭建ngi ...
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
随机推荐
- 剑指offer(61)序列化二叉树
题目描述 请实现两个函数,分别用来序列化和反序列化二叉树 题目分析 首先拿到题目时候,我先想到的是什么是序列化二叉树?序列化主要就是在前后端交互时候需要转换下,毕竟网络传输的是流式数据(二进制或者文本 ...
- Swagger2使用参考
GitHub例子: 参考博客: https://blog.csdn.net/sanyaoxu_2/article/details/80555328 http://www.cnblogs.com/Joi ...
- HDU3033 I love sneakers!———分组背包
这题的动态转移方程真是妙啊,完美的解决了每一种衣服必须买一件的情况. if(a[x][i-c[x][j].x]!=-1) a[x][i]=max(a[x][i],a[x][i-c[x][j].x]+c ...
- Linux 查看进程之PS命令
要对进程进行检测和控制,首先必须要了解当前进程的情况,也就是需要查看当前进程运行状态.Linux 系统中 我们可以使用 ps 命令查看进程. ps 命令介绍 ps(process stat ...
- 浅谈Cocos2d-js cc.director
在cocos2d-x里面,游戏的任何时间,只有一个场景对象实例处于运行状态,该对象可以作为当前游戏内容的整体包对象. 环境设定 进入游戏之前,导演会设置游戏的运行环境: 设置游戏视图,包含视图的投射, ...
- C语言获取Linux系统精确时间
gettimeofday()函数的使用方法 1.函数原型 #include <sys/time.h> int gettimeofday(struct timeval *tv, struct ...
- php格式化json字符串
header('content-type:application/json;charset=utf8'); $arr = array( 'status' => true, 'errMsg' =& ...
- MVC实战之排球计分软件(深入了解面向对象编程)
在此篇博客之前,我已经写了一个实战系列的博客,虽然不太成熟但是相对比较实用,在这篇博客我将继续使用mvc编程此软件. 此篇博客会在一定的时间内完成,此次完成的软件的一个需求是提供给运动员的使用.我将在 ...
- Wincc用户登录VBS脚本
在Wincc中为防止未知用户的误操作,在操作性按钮以及图符等设备操作面板,在组流程图时,需设置用户权限,只有符合权限的用户才可以进行操作.所以在流程图界面需设置系统用户登录界面.登录操作可以选择按钮或 ...
- 简述采用四次握手机制释放TCP连接的四个步骤
(1)源结点A向目的结点B发送连接释放请求(FIN,seg=x),并且不再向B发送数据,但仍继续接收从B发来的数据. (2)目的结点B收到此连接释放请求后立即向A发出确认(ACK,ack=x+1),但 ...