实现页面：

实现效果：

实现代码：

<!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. Django框架的初使用-2

    目录 Django框架的初使用-1 1 Django MVT回顾 2 模型M 2.1 ORM框架 2.2 模型设计 3 视图V 3.1 定义视图函数 3.2 配置URLconf 3.3 视图-匹配过程 ...

  2. dotnetcore3.1 WPF 实现多语言

    dotnetcore3.1 WPF 实现多语言 Intro 最近把 DbTool 从 WinForm 迁移到了 WPF,并更新到了 dotnet core 3.1,并实现了基于 Microsoft.E ...

  3. WinFrom 在Devexpress里用GridControl和DataNavigtor进行分页

    1,分页嘛先要有个SQL 程序才能写下去 先提供下SQL的思路,对于分页的SQL我之前帖子有介绍,就不一一介绍了 select top pageSize * --显示数量 from (select r ...

  4. Hadoop架构及集群

    Hadoop是一个由Apache基金会所开发的分布式基础架构,Hadoop的框架最核心的设计就是:HDFS和MapReduce.HDFS为海量的数据提供了存储,而MapReduce则为海量的数据提供了 ...

  5. 「Flink」Flink的状态管理与容错

    在Flink中的每个函数和运算符都是有状态的.在处理过程中可以用状态来存储数据,这样可以利用状态来构建复杂操作.为了让状态容错,Flink需要设置checkpoint状态.Flink程序是通过chec ...

  6. Android开发之adt bundle安装

    这个学期开了一门手机游戏开发的课,所以就接触到了adt bundle,Android开发环境有三种方式,分别是JDK+SDK+Eclipse+ADT.JDK+adt-bundle与JDK+Androi ...

  7. KINDLE 小说下载--超级书库

       网址:https://shuayouxi.cn/

  8. adams技巧汇总

    T+左键        平动模型 R+左键        旋转模型 Z+左键        动态缩放 F或Ctrl+F     以最大比例全面显示模型 S+左键        沿着垂直于屏幕的轴线旋转 ...

  9. EPEL添加与删除

    EPEL简介 EPEL的全称叫 Extra Packages for Enterprise Linux,由Fedora社区打造,如它的全称,这是一个为红帽系列及衍生发行版如CentOS.Fedora提 ...

  10. P1422 小玉家的电费（scanf，printf）

    题目描述 夏天到了,各家各户的用电量都增加了许多,相应的电费也交的更多了.小玉家今天收到了一份电费通知单.小玉看到上面写:据闽价电[2006]27号规定,月用电量在 150 千瓦时及以下部分按每千瓦时 ...