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文件也会越来 ...
随机推荐
- 单元测试系列之六:JUnit5 技术前瞻
更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6868495.html JUnit ...
- 修改SS配置文件使其同时支持IPV4和IPV6网络
将/etc/shadowsocks-libev/config.json文件中的 "server":"0.0.0.0", 修改为: "server&qu ...
- Win32汇编学习(7):鼠标输入消息
这次我们将学习如何在我们的窗口过程函数中处理鼠标按键消息.例子演示了如何等待鼠标左键按下消息,我们将在按下的位置显示一个字符串. 理论: 和处理键盘输入一样,WINDOWS将捕捉鼠标动作并把它们发送到 ...
- 编码原则 之 Explicit Dependencies Principle
Explicit Dependencies Principle The Explicit Dependencies Principle states: Methods and classes shou ...
- HTML基础【4】:表格标签
表格标签 在过去表格标签用的非常非常的多,绝大多数的网站都是使用表格标签来制作的,也就是说表格标签是一个时代的代表 作用:以表格形式将数据显示出来,当数据量非常大的时候,表格这种展现形式被认为是最为清 ...
- Intellj IDEA光标问题
Intellj IDEA光标为insert状态,无法删除内容以前用得是社区版的IDEA,今天装了14版本的,结果导入项目后,发现打开java文件的光标是win系统下按了insert键后的那种宽的光标, ...
- 【Luogu P2664】树上游戏
Problem Description \(lrb\) 有一棵树,树的每个节点有个颜色.给一个长度为 \(n\) 的颜色序列,定义 \(s(i,j)\) 为 \(i\) 到 \(j\) 的颜色数量.以 ...
- Less、Sass和SCSS
(一)区别: Less(可在客户端和服务端运行)是一种动态样式语言,对css赋予了动态语言的特性,如:变量.继承.运算.函数. SCSS为Sass的升级版本,兼容Sass功能,又新增功能.SCSS 需 ...
- maven 如何使用
以前没有用过maven管理过项目的依赖,最后使用上了maven,发现通过不能方式建立出来的web应用程序目录结构基本都不一样,既然每次都要到网上搜索如何建立maven管理的Web应用程序,不如自己找百 ...
- CentOS下redis-cli安装
Step1:安装gcc wget等系统lib yum install -y gcc wget Step2:获取redis稳定版并解压 cd /tmp wget http://download.redi ...