<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. cgpwn2-嫖来的wp

    本想练习pwn的题目活跃下思维,但是接触后发现完全不懂,gg 然后就多方搜集,弄来了一些工具(IDA pro.pwntool)结果自己还是不会用,又是一番刷视频,结果看完又是一脸懵. 只记得一个快捷键 ...

  2. linux环境下查看tomcat日志

    1.先切换到:cd usr/local/tomcat5/logs 2.tail -f catalina.out 3.这样运行时就可以实时查看运行日志 Ctrl+c 是退出tail命令. alt+E+R ...

  3. Day2-F-A Knight's Journey POJ-2488

    Background The knight is getting bored of seeing the same black and white squares again and again an ...

  4. （转）C#的 GC工作原理基础

    作为一位C++出身的C#程序员,我最初对垃圾收集(GC)抱有怀疑态度,怀疑它是否能够稳定高效的运作:而到了现在,我自己不得不说我已经逐渐习惯并依赖GC与我的程序“共同奔跑”了,对“delete”这个习 ...

  5. pgsql数据库 pg_hba.conf 中 METHOD 的说明

    pg_hba.conf 文件是pgsql用于配置访问权限的配置文件,  内容如下: ##############begin#################### #   TYPE    DATABA ...

  6. QAM格雷码映射的规则（Gray Code Mapping in QAM）

    高阶调制(QAM,MQAM)信号中做基带映射,格雷码作为一种规范的映射规则,加上I,Q方向上相邻两个星座点对应的Bit_Cluster中只有一个Bit不同,所以有方便统一的特性. 以16QAM为例,先 ...

  7. 机器学习算法中的网格搜索GridSearch实现（以k-近邻算法参数寻最优为例）

    机器学习算法参数的网格搜索实现: //2019.08.031.scikitlearn库中调用网格搜索的方法为:Grid search,它的搜索方式比较统一简单,其对于算法批判的标准比较复杂,是一种复合 ...

  8. ESX/ESXi 主机上的每个插槽中安装了多少内存

    要确定在 ESX/ESXi 主机上的每个插槽中安装了多少内存,请执行以下操作: 1. 启动ssh服务 2. 登陆esxi主机查看 使用 SSH 客户端登录主机,以 root 用户身份运行以下命令之一: ...

  9. 【转】R语言主成分分析（PCA）

    https://www.cnblogs.com/jin-liang/p/9064020.html 数据的导入 > data=read.csv('F:/R语言工作空间/pca/data.csv') ...

  10. RDD 可视化 —— RDDOperationScope.withScope

    最近在看各种博客,学习 spark 源代码. 网上对源代码的分析基本都是基于 0.7, 0.8, 1.0 的代码,而现在的发行版已经是 1.5 了.所以有些代码不大对的上.比如函数 RDD.map() ...