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. LNMP 如何安装mongodb

    wget -c http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.6.4.tgztar -zxvf mongodb-linux-x86_64 ...

  2. K8S学习笔记之Kubernetes 部署策略详解

    0x00 概述 在Kubernetes中有几种不同的方式发布应用,所以为了让应用在升级期间依然平稳提供服务,选择一个正确的发布策略就非常重要了. 选择正确的部署策略是要依赖于我们的业务需求的,下面我们 ...

  3. 7、Kafka、AMQ、RabbitMQ对比

    Kafka AMQ RabbitMQ 应用场景 AMQ/RabbitMQ Kafka

  4. 剑指offer(54)字符流中第一个不重复的数字

    题目描述 请实现一个函数用来找出字符流中第一个只出现一次的字符.例如,当从字符流中只读出前两个字符"go"时,第一个只出现一次的字符是"g".当从该字符流中读出 ...

  5. jQuery实现淘宝轮播图

    我爱撸码,撸码使我感到快乐大家好,我是Counter今天给大家分享的是利用jQuery来实现淘宝轮播图,揭开这层神秘的面纱,CSS样式就不做过多的赘述了,主要就是实现的原理,也就是jQuery,老样子 ...

  6. CSS基础【2】:CSS常见属性

    CSS常见属性 文字属性 font-style 作用:规定文字样式 格式:font-style: italic; 取值: normal:正常的,默认就是正常的 italic:倾斜的 font-weig ...

  7. #python计算结果百位500向下取整,(0-499取000,500-999取500)

    !/usr/bin/env python coding:utf-8 计算结果百位500向下取整,(0-499取000,500-999取500) import math calc_Amount = fl ...

  8. Web开发中button与submit区别

    submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了. 如果表单在点击提交按钮后需要用JS进行处理(包括输入验证)后再提交的话,通常都必须把submit改成butt ...

  9. port 执行命令的封装和参数详解

    下面代码摘自rebar_utils.erl -module(tt7). %-export([start/0]). -compile(export_all). -define(FAIL, abort() ...

  10. memory.h

    1.功能:提供内存操作函数 2.函数: extern void *memchr(const void *buffer, int ch, size_t count); extern void *memc ...