<body>

    <div id="app">

        <p @click="go">hello app!</p>

        <p @click="pas">back path</p>

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

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

    </div>

</body>

<script>

const Foo = { template: '<div>foo</div>' };

const Baz = { template: '<div>test</div>' };

const Aaz = { template: '<div>Aaz</div>' };

const router = new VueRouter({

    routes : [

        {

            path: '/',

            components: {

                default: Foo,

                a: Baz,

                b: Foo

            }

        },

        {

            path: '/home',

            components: {

                default: Foo,

                a: Foo,

                b: Aaz

            }

        }

    ]

});

const app = new Vue({

    router,

    methods:{

        go(){

            router.push({

                path: '/home'

            });

        },

        pas(){

            router.push({

                path: '/'

            });

        }

    }

}).$mount('#app');

一个页面里面可以多视图，不同的链接可以导航到同一个页面，但是页面可以根据参数渲染不同的组件形式

vue路由 视图命名的更多相关文章

  1. vue 路由视图，router-view嵌套跳转

    实现功能:制作一个登录页面,跳转到首页,首页包含菜单栏.顶部导航栏.主体,标准的后台网页格式.菜单栏点击不同菜单控制主体展示不同的组件(不同的页面). 配置router-view嵌套跳转需要准备两个主 ...

  2. Vue学习笔记【29】——Vue路由（命名视图实现经典布局）

    命名视图实现经典布局 标签代码结构:  <div id="app">    <router-view></router-view>    < ...

  3. Vue路由-命名视图实现经典布局

    Vue路由-命名视图实现经典布局 相关Html: <!DOCTYPE html> <html lang="en"> <head> <met ...

  4. VueJs(11)---vue-router（命名路由，命名视图，重定向别名，路由组件传参）

    vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...

  5. Vue 路由的简单使用(命名路由、query路由传参、params路由传参)

    1 # Vue 路由 2 # 1.理解:一个路由(toute)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 3 # 2.前端路由:key是路径,value是组件 ...

  6. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  7. 14.vue路由&脚手架

    一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...

  8. 初印象至Vue路由

    初印象系列为快速了解一门技术的内容,后续会推出本人应用这门技术时发现的一些认识. Vue路由和传统路由的区别: Vue路由主要是用来实现单页面应用内各个组件之间的切换,同样支持传递参数等功能.而传统路 ...

  9. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

随机推荐

  1. 9月Win10杀软大PK

    导读 严格来说,Windows 10 并不存在“裸奔”一说,因为自带的 Defender 安全中心已经是越来越强大. 来自独立机构 AV-Comparatives 的 9 月份评测报告显示,Windo ...

  2. JS中的鼠标移入移除监控操作

    有些时候我们需要通过页面来监控用户的行为,包括鼠标操作键盘操作,本文章介绍的是鼠标的操作监控: <script> window.onload = function(){ var oDiv ...

  3. 总结了一下 Vue.nextTick() 的原理和用途

    对于 Vue.nextTick 方法,自己有些疑惑.在查询了各种资料后,总结了一下其原理和用途,如有错误,请不吝赐教. 概览 官方文档说明: 用法: 在下次 DOM 更新循环结束之后执行延迟回调.在修 ...

  4. 081、Java数组之数组传递

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  5. js 中 一些重要的数组方法

    今天在学Vue的时候,看到了好多JS的数组方法,但是我不知道,我以为是Vue的方法,结果找了半天资料也没找出来,最后才发现这是JS的数组对象方法,于是就想做一下笔记,加深一下印象. Array 对象方 ...

  6. JuJu团队1月8号工作汇报

    JuJu团队1月8号工作汇报 JuJu   Scrum 团队成员 今日工作 剩余任务 困难 飞飞 实现三维Dense 将crossentrophy和softmax连接起来 无 婷婷 完善main.jl ...

  7. PAT (Advanced Level) 1132~1135：1132 模拟 1133模拟（易超时！） 1134图 1135红黑树

    1132 Cut Integer(20 分) 题意:将一个含K(K为偶数)个数字的整数Z割分为A和B两部分,若Z能被A*B整除,则输出Yes,否则输出No. 分析:当A*B为0的时候,不能被Z整除,输 ...

  8. XV6源代码阅读-同步机制

    Exercise1 源代码阅读 锁部分:spinlock.h/spinlock.c以及相关其他文件代码 // Mutual exclusion lock. struct spinlock { uint ...

  9. 剑指offer第12题打印从1到n位数以及大整数加法乘法

       字符和数字加减就是字符的ASCII码和数字直接加减. 方法一: 1)在字符串操作中给一个整形数字加(字符0)就是把它转化为字符,当然给一个字符减去(字符0)就可以把它转化为数字了:如果确实是最后 ...

  10. 富文本API

    这个笔记来自网络资料的总结 简书大佬三省吾身_9862 tuobaye个人博客 富文本有相关3个API和一个新属性 var selection = window.getSelection(); var ...