<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. 博途V13 仿真S7-300PLC 与HMI 的以太网通讯。实现简单功能 HMI 型号是TP900

    本项目仅完成S7-300 PLC 型号为 315-2DP/PN HMI的型号是 智慧面板TP900 通过以太网进行连接.通过网络及连接 进行组态 PLC的程序 功能一 完成电动机的启动与停机 功能二 ...

  2. JAVA 数据库操作工具类----sqllite

    package com.asc.db; import android.content.ContentValues; import android.content.Context; import and ...

  3. android图片保存到SQLlite如何实现？

    //写入数据库               ImageView pic = (ImageView) findViewById(R.id.picture);                        ...

  4. windows10安装.netframework3.5

    先挂载,看看挂载到哪个盘了,假设是I盘 然后按住shift 点鼠标右键,打开powershell,运行下面命令: dism.exe /online /enable-feature /featurena ...

  5. BOM--window对象

    BOM 的核心对象是window,它表示浏览器的一个实例.在浏览器中,window 对象有双重角色,它既是通过JavaScript 访问浏览器窗口的一个接口,又是ECMAScript 规定的Globa ...

  6. Android将数据存储到应用的数据目录下

    下面是具体代码,其中MainActivity.java的部分代码有修改,在文章后面给出 logindemo_layout.java <?xml version="1.0" e ...

  7. Day9 - C - Bookshelf 2 POJ - 3628

    Farmer John recently bought another bookshelf for the cow library, but the shelf is getting filled u ...

  8. C# 篇基础知识6——文件和流

    计算机以文件的形式把数据存储在磁盘.光盘等存储设备上.文件的管理和操作是操作系统的一个重要组成部分,.NET 框架提供了一组功能强大的类,可以方便地对文件进行操作和管理. 1.文件操作相关的类 用于文 ...

  9. 四 String类

    1 关于String类

  10. 开发工具类（eclipse、安卓SDK） 镜像站

    1.eclipse 中国科技大学:http://mirrors.ustc.edu.cn/eclipse/ 中国科学院:http://mirrors.opencas.cn/eclipse/ 东北大学:h ...