实现页面：

实现效果：

实现代码：

<!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. 【转】Redis内部数据结构详解 -- skiplist

    本文是<Redis内部数据结构详解>系列的第六篇.在本文中,我们围绕一个Redis的内部数据结构--skiplist展开讨论. Redis里面使用skiplist是为了实现sorted s ...

  2. 【二】、UML基础知识——图图解乾坤

    [二].UML基础知识 UML概述 UML是一个通用的可视化建模语言,不同于编程语言,它通过一些标准的图形符号和文字来对系统进行建模.用于对软件进行描述.可视化处理.构建软件系统的文档.是一套总结了以 ...

  3. 关于Redis缓存预热的思考

    系统上线时,提前将相关的缓存数据直接加载到缓存系统.避免在用户请求的时候,先查询数据库,然后再将数据缓存的问题. 这里我考虑2个问题: A.哪些数据需要预热? B.如何预热? 关于问题A,根据不同的业 ...

  4. update mysql row (You can't specify target table 'x' for update in FROM clause)

    sql语句(update/delete都会出现此问题) update x set available_material_id = null where id not in (select id fro ...

  5. go单任务版爬虫

    go单任务版爬虫(爬取珍爱网) 爬虫总体算法 单任务版爬虫架构 任务 获取并打印所在城市第一页用户的详细信息 代码实现 /crawler/main.go package main import ( & ...

  6. Angular文件基本结构

    main.ts(应用程序主入口) → app.module.ts app.module.ts //这个根模块会告诉Angular如何组装该应用 //引入模块 import { BrowserModul ...

  7. 【47】迁移学习（Transfer Learning）

    迁移学习(Transfer Learning) 如果你要做一个计算机视觉的应用,相比于从头训练权重,或者说从随机初始化权重开始,如果你下载别人已经训练好网络结构的权重,你通常能够进展的相当快,用这个作 ...

  8. 如何在Mac上显示和查看隐藏的文件/文件夹

    今天的文章推出的是如何在Mac上显示和查看隐藏的文件/文件夹.出于隐私或安全性考虑,出于多种原因,我们需要在Mac计算机上隐藏某些文件.这些文件或文件夹在默认情况下是为Mac的平稳运行而隐藏的,但是如 ...

  9. [Python] 前程无忧招聘网爬取软件工程职位 网络爬虫 https://www.51job.com

    首先进入该网站的https://www.51job.com/robots.txt页面 给出提示: 找不到该页 File not found 您要查看的页已删除,或已改名,或暂时不可用. 请尝试以下操作 ...

  10. 吴裕雄--天生自然HADOOP操作实验学习笔记：mapreduce代码编程

    实验目的 深入了解mapreduce的底层 了解IDEA的使用 学会通过本地和集群环境提交程序 实验原理 1.回忆mapreduce模型 前面进行了很多基础工作,本次实验是使用mapreduce的AP ...