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文件也会越来 ...
随机推荐
- ListTile
const ListTile({ Key key, this.leading, // item 前置图标 this.title, // item 标题 this.subtitle, // item 副 ...
- CSS 内边距 外边距
CSS 内边距 外边距 <html> <!-- style="margin: 0 auto" 将网页上方空白边距填满--> <body style=& ...
- Python 缓存服务
缓存服务:mongodb.redis.memcache mongodb:早期的缓存系统,直接持久话,数据即存内存也同步到硬盘. redis:主流缓存系统,半持久化,默认存在内存,需要手动调用存在硬盘, ...
- 剑指offer(1)二维数组的查找
限制今天起开始也刷剑指offer啦,一步一步来. 题目描述 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数, ...
- PTA编程总结3—抓老鼠啊~亏了还是赚了?
题目: 某地老鼠成灾,现悬赏抓老鼠,每抓到一只奖励10元,于是开始跟老鼠斗智斗勇:每天在墙角可选择以下三个操作:放置一个带有一块奶酪的捕鼠夹(T),或者放置一块奶酪(C),或者什么也不放(X).捕鼠夹 ...
- freecodecamp数字转化成罗马数字
做数字转罗马数字时,用到了贪心算法,很好用,记录一下,有时间系统的学一下 罗马数字的规则: 罗马数字网址 1 5 10 50 100 500 1000 I V X L C D M1 1当一个符号在一个 ...
- 决策树算法原理(ID3,C4.5)
决策树算法原理(CART分类树) CART回归树 决策树的剪枝 决策树可以作为分类算法,也可以作为回归算法,同时特别适合集成学习比如随机森林. 1. 决策树ID3算法的信息论基础 1970年昆兰找 ...
- java笔记 -- 数学函数与常量
Math类中, 包含了各种数学函数 不用在数学方法名和常量名前添加前缀Math., 只要在源文件的顶部加上这行代码: import static java.lang.Math.*; (静态导入) 例: ...
- p6spy简介
在公司项目中运用了这项技术,一开始不清楚这是干啥用的,在网上查找资料有所一定的了解,但是应该不够全面,希望可以评论指出. p6spy是数据库动态监控的一种框架,它可以使得数据库数据无缝拦截和操作,而不 ...
- 【原创】一篇学会vue路由配置 、 动态路由 、多层路由(实例)
先来看看效果图: 为了方便讲解,我没有使用vue脚手架,如果需要的,可以留言跟我要.不多说开工: 首先,html先组上 <div id="app"> <div&g ...