实现页面：

实现效果：

实现代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="js/vue.js" ></script>

        <script type="text/javascript" src="js/vue-router.js" ></script>

        <style type="text/css">

            #app{width: 800px;margin: 0 auto;}

            #banner{text-align: right;line-height: 40px;background-color: royalblue;color: #fff;padding: 0 10px;}

            #container{display: flex;text-align: center;height: 500px;}

            .index{flex: 10;background-color: lightblue;}

            .article{flex:7;background-color: lightblue;}

            .attention{flex:7;background-color: lightblue;}

            .hot{flex:3;background-color: lightpink;}

        </style>

    </head>

    <body>

        <div id="app">

            <div id="banner">

                <router-link to="/index" tag="span">首页</router-link>

                <router-link to="/article" tag="span">我的文章</router-link>

                <router-link to="/attention" tag="span">我的关注</router-link>

            </div>

            <div id="container">

                <router-view></router-view>

                <router-view name="article"></router-view>

                <router-view name="attention"></router-view>

                <router-view name="hot"></router-view>

            </div>

        </div>

        <template id="index">

            <div class="index">主体页面</div>

        </template>

        <template id="article">

            <div class="article">文章列表页面</div>

        </template>

        <template id="attention">

            <div class="attention">我的关注页面</div>

        </template>

        <template id="hot">

            <div class="hot">热门文章推荐</div>

        </template>

        <script type="text/javascript">

            var indexTemp = {template:"#index"}

            var articleTemp = {template:"#article"}

            var attentionTemp = {template:"#attention"}

            var hotTemp = {template:"#hot"}

            Vue.component('index',indexTemp)

            Vue.component('article',articleTemp)

            Vue.component('attention',attentionTemp)

            Vue.component('hot',hotTemp)

            var routerRules = new VueRouter({

                routes:[

                    {path:'/index',component:indexTemp},

                    {

                        path:'/article',

                        components:{article:articleTemp,hot:hotTemp}

                    },

                    {

                        path:'/attention',

                        components:{attention:attentionTemp,hot:hotTemp}

                    },

                ]

            })

            var vm = new Vue({

                el:"#app",

                router:routerRules

            })

        </script>

    </body>

</html>

vue 多组件路由处理方法的更多相关文章

  1. element-ui(vue)upload组件的http-request方法的使用

    element-ui(vue)upload组件的http-request方法的使用 官方文档: http-request方法有一个默认的参数 content content 是一个object对象:里 ...

  2. vue 父子组件传值以及方法调用，平行组件之间传值以及方法调用大全

    vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...

  3. vue的组件之间传值方法

    父组件 <template> <div> 这是父组件 <children v-bind:parentToChild="toChild" v-on:sh ...

  4. vue父子组件路由传参的方式

    一.get方式(url传参): 1.动态路由传参: 父组件: selectItem (item) { this.$router.push({ path: `/recommend/${item.id}` ...

  5. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  6. vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法

    (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...

  7. vue中组件的四种方法总结

    希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...

  8. vue父子组件之间互相获取data值&调用方法（非props）

    vue 子组件调用父组件方法&数据 vue有$parent这么一个属性,在子组件中就能拿到父组件的数据 this.$parent.xxx 就能调用父组件的方法 this.$parent.xxx ...

  9. vue 父子组件的方法调用

    $emit 子组件触发父组件的方法: <!-- 子组件 --> <template> <div id="child"> <button @ ...

随机推荐

  1. 单元测试-xUnit总结

    xUnit总结 什么是xUnit xUnit.net是针对.NET Framework的免费,开源,以社区为中心的单元测试工具. 自动化测试的优点 可以频繁的进行测试 可以在任何时间进行测试,也可以按 ...

  2. JavaScript节流与防抖函数封装

    js节流与防抖函数封装 常见应用场景: window的 resize 和 scroll 事件: 文字输入时的 keyup 事件: 元素拖拽.移动时的 mousemove 事件: 防抖 定义:多次触发事 ...

  3. jQuery--dataTable 前端分页与后端分页 及遇到的问题

    (1)区别 前端分页:一次性把所有数据全都放在前端,由前端进行处理:适合请求的数据量不大的情况 后端分页:服务器模式,所有的分页,搜索,排序等操作在服务器端完成,然后前端去请求数据:适合量大的情况 ( ...

  4. LINQ标准查询运算符的执行方式-延时之流式处理

    linq的延时执行是指枚举时才去一个个生成结果元素. 流式处理是linq延时执行的一种,在生成元素前不需要获取所有源元素,只要获取到的源元素足够计算时,便生成结果元素. 流式处理的标准查询运算符返回值 ...

  5. Apache Solr JMX服务 RCE 漏洞复现

    Apache Solr JMX服务 RCE 漏洞复现 ps:Apache Solr8.2.0下载有点慢,需要的话评论加好友我私发你 0X00漏洞简介 该漏洞源于默认配置文件solr.in.sh中的EN ...

  6. 进阶之路 | 奇妙的Drawable之旅

    前言 本文已经收录到我的Github个人博客,欢迎大佬们光临寒舍: 我的GIthub博客 学习清单: Drawable简介 Drawable分类 自定义Drawable 一.为什么要学习Drawabl ...

  7. JavaScript之DOM基础

    概述 DOM(Document Object Model)文档对象模型,针对Html和XML的文档的对象API,是一项 W3C (World Wide Web Consortium) 标准.文档对象模 ...

  8. 实际开发常用的jquey事件类型，并运用到图片相册

    鼠标事件 .click  鼠标单击 .dblclick  鼠标双击 // 单击事件 $("a").click(function(){ $("img").eq($ ...

  9. npm下载文件临时目录、实际存放目录路劲

    npm 下载文件临时存放目录 路劲:C:\Users\xxxxxx\AppData\Roaming\npm\node_modules ( C:\Users\dihongwanyan\AppData\R ...

  10. Policy-based Approach(基于策略的方法)

    step 1:Neural Network as Actor step 2:goodness of function(训练一些Actor) 是一个序列,包含T个状态s.行为a.奖励s.代表某一次的开始 ...