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(配置子路由--单页面多路由区域操作)的更多相关文章

  1. vue router 配置默认页/404页面

    *号通配404默认页面

  2. Vue 子路由 与 单页面多路由 的区别

    本文地址:http://www.cnblogs.com/veinyin/p/7911292.html 最近学完了基础课程,打算整理一波笔记,对基本概念梳理一遍,惊觉对子路由和单页面多路由混淆的一塌糊涂 ...

  3. 基于laravel5.4 vue 和vue-element搭建的单页面后台CMS

    介绍 该项目后台是基于vue和laravel搭建的单页面CMS系统,包含了文章管理,权限管理,用户管理等基本模块. 前台使用了传统web技术,laravel渲染搭建了个博客系统 github地址:ht ...

  4. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  5. 使用react-router实现单页面应用路由

    这是Webpack+React系列配置过程记录的第二篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  6. vue,react,angular本地配置nginx 环境单页面应用

    一.起因:项目使用VUE,和react.构建单页面应用.在nginx的环境下只有一个index.html入口.这时候默认能够访问到vue,和react 路由 配置中的首页.内部连接也能够跳转但是不能给 ...

  7. webpack配合vue.js实现完整的单页面demo

    本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...

  8. nignx部署Vue单页面刷新路由404问题解决

    官网说明: https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E8%AD%A6%E5%91%8A 在linux下搭建ngi ...

  9. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

随机推荐

  1. Python 新式类与经典类

    新式类,经典类 查询匹配 广度查询 横着对每个类进行查询 深度查询 无视平级类,直接寻找下级类 #python 3.0 #新式类 广度查询 #经典类 广度查询 #python 2.0 #新式类 广度查 ...

  2. 一、restful规范 二、CBV(View)源代码执行流程 三、drf框架安装和简单使用

    一.restful规范 ''' 它是一个规范,面向资源架构 十条规范 1.API与用户的通讯协议,总是使用HTTPs协议,确保了网络传输的安全性 2.域名 --https://api.example. ...

  3. #const#const int *p 为何可以不初始化

    摘自http://www.myexception.cn/cpp/1900041.html const int *p 为什么可以不初始化?c++ primer 5th   P53 写道:const 对象 ...

  4. linux中使用ifconfig命令查看网卡信息时显示为eth1,但是在network-scripts中只有ifcfg-eth0的配置文件,并且里面的NAME="eth0"。

    除了题目中的问题,其实在执行命令:service network restart时,会报错: 解决办法: 首先需要修改70-persistent-net.rules文件: vim /etc/udev/ ...

  5. 转 flowcanvas

    http://blog.sina.com.cn/s/blog_5fb40ceb0102wveq.html Unity 强大的可视化编程插件,Flowcanvas + Nodecanvas 组合(深度修 ...

  6. 一起用ipython

    安装 安装python2版本的软件包就用命令 pip install ipython 安装python3版本对应的软件包就用命令 pip3 install ipython 进入了ipython,ipy ...

  7. Angular2 EventEmitter

    可能你对EventEmitter还不太熟悉,不过别担心,它并不难.EventEmitter只是一个帮你实现观察者模式①的对象.也就是说,它是一个管理一系列订阅者并向其发布事件的对象.就是这么简单.来看 ...

  8. 英语发音规则---E字母常见的发音组合有哪些

    英语发音规则---E字母常见的发音组合有哪些 一.总结 一句话总结:很好记的e和5个元音字母的组合,加一个非e开头的ie e:开音节 /i:/  eve /i:v/ n. 夏娃----闭音节 /e/ ...

  9. mongodb ----> 从入门到。。。

    环境: centos6.8,jdk1.8.0_u172,mongodb-4.0.0,spring boot-1.5.15 1.环境搭建 tar -zxvf mongodb-linux-x86_64-r ...

  10. jRazor

    引擎渲染速度竞赛 条数据 × 次渲染测试 建议在高版本的浏览器上进行测试,避免浏览器停止响应 测试环境: 开始测试»