实现页面：

实现效果：

实现代码：

<!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. 使用Visual Studio Comunity 2019开发Unity C#脚本没有自动补全的解决方法

    最近开始试着玩Unity3D,要为场景中的物体编辑脚本.Unity3D推荐的脚本语言是C#,在Unity打开C#就会使用Visual Studio来进行编辑. 启动Visual Studio之后注意到 ...

  2. [WPF 学习] 3.用户控件库使用资源字典的困惑

    项目需要(或者前后端分离的需要),前端我使用了用户控件库,由后端用代码加载和控制. 然而用户控件库没法指定资源字典,于是在用户控件的xaml文件里面手工添加了资源字典 <UserControl. ...

  3. Girlfreind:1 Vulnhub Walkthrough

    靶机链接: https://www.vulnhub.com/entry/me-and-my-girlfriend-1,409/ 主机扫描: HTTP 目录访问,提示无权限,右键源码,提示XXF即可 正 ...

  4. 剑指offer-字符的所有组合，复制复杂链表，二叉树中和为某一值的路径

    字符的所有组合 描述: 输入一个字符串,求这个字符串中的字符的所有组合.如:"abc",组合为"a" "b" c" "a ...

  5. vue router引入路由与路由配置容易犯错的地方与常见的报错与处理报错

    首先npm安装vue-router插件,就不说了其次: 先看下我本地的目录结构吧 第一步:在src目录下新建一个专门存放router的index.js文件里面的内容为: import Vue from ...

  6. 使用Ajax时[object%20object] 报错的解决方案

    踩坑经过 最近初学Ajax,当我想把Ajax应用到自己项目中的时候,没有达到理想的效果,还报了如下错误: 点击图中报错,产生报错页面如下: 当时写的Ajax如下: // 提交修改密码表单 $(&quo ...

  7. findContours()函数

    函数原型 findContours(InputOutputArray image, OutputArrayOfArrays contours, OutputArray hierarchy, int m ...

  8. MongoDB3.6版本新增特性

    MongoDB3.6版新特性如下: (1)Default Bind to Localhost 从3.6版本开始,在默认情况下,MongoDB二进制文件mongod和mongos绑定到localhost ...

  9. cf1280B

    题意:给出一个n*m的矩阵,矩阵中的元素要么P要么是A 每次可以选择一个的子矩形,然后将矩阵中每一行都变为第一行,或者将矩阵中每一列都变为第一列 要求用最少的次数将矩阵中所有元素都变成A 题解:分类讨 ...

  10. 简单的OO ALV显示ALV及下载

    REPORT OO_ALV. CLASS OO_ALV DEFINITION. PUBLIC SECTION. METHODS:GET_DATA IMPORTING AMOUNT TYPE I,&qu ...