<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue-router之命名视图的实例</title>

    <script src="vue.js"></script>

    <script src="node_modules/vue-router/dist/vue-router.js"></script>

</head>

<body>

<style>

    .news {

        width: 200px;

        float: left;

        border: 1px #188eee solid;

    }

    .slide {

        width: 200px;

        float: left;

        border: 1px #000 solid;

    }

</style>

<div id="demo">

    <router-view></router-view>

    <router-view class="news" name="news"></router-view>

    <router-view class="slide" name="slide"></router-view>

</div>

<script type="text/x-template" id="menu">

    <div>

        <a href="http://www.baidu.com">百度一下</a>

        <a href="http://www.baidu.com">知天下</a>

    </div>

</script>

<script type="text/x-template" id="news">

    <div>

        <li v-for="v in newss">{{v.title}}</li>

    </div>

</script>

<script type="text/x-template" id="slide">

    <div>

        <li v-for="v in datas">{{v.title}}</li>

    </div>

</script>

<script type="text/javascript">

    const menu = {

        template: "#menu"

    }

    const news = {

        template: "#news",

        data() {

            return {

                newss: [

                    {title: '测试一'},

                    {title: '测试二'},

                ]

            }

        }

    }

    const slide = {

        template: "#slide",

        data() {

            return {

                datas: [

                    {title: '测试三'},

                    {title: '测试四'},

                ]

            }

        }

    }

    var routes = [

        {

            path: '/', components: {

            default: menu,

            news: news,

            slide: slide

        }

        }

    ]

    var router = new VueRouter({routes});

    new Vue({

        el: "#demo",

        router

    });

</script>

</body>

</html>

　　

062——VUE中vue-router之命名视图的实例的更多相关文章

  1. 【面试题】Vue中的$router 和 $route的区别

    Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...

  2. Vue中this.$router.push（参数） 实现页面跳转

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...

  3. vue中修改了数据但视图无法更新的情况[转载]

    我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据 ...

  4. vue中的router和route有什么区别？

    我只知道前者一般用在跳转路由的时候,push一个url, 而后者则用来存储路由跳转过程中存储的各种数据. 话不多说,这篇博客讲的比较详细,可以参考一下. vue2.0中的$router 和 $rout ...

  5. vue中修改了数据但视图无法更新的情况

    数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() ...

  6. vue中使用router全局守卫实现页面拦截

    一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最 ...

  7. vue中的$router 和 $route的区别

    最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...

  8. vue 中的router 配置问题 导致的内存溢出~~~

    最近的项目用到 vue, 各种踩坑中. 其中一个就是router映射表写的稍有不慎,就会出现内存溢出的问题, 而且也不会具体告诉你哪里出错,所以很是头疼~~~ 出错多了,发现了一些router的一些规 ...

  9. vue中改变数组的值视图无变化

    今天开发的时候遇到一个多选取消点击状态的,渲染的时候先默认都选中,然后可以取消选中,自建了一个全为true的数组,点击时对应下标的arr[index]改为false,数据改变了状态没更新,突然想起来单 ...

随机推荐

  1. QTQuick控件基础（1）

    一.Item QtQuick所有的可视项目都继承自Item,它定义了可视化项目所有通用特性(x\y\width\height\anchors等)具体包括 1.作为容器 2.不透明性 没有设置opaci ...

  2. vs2012添加自定义资源步骤

    1.新建Win32工程 2.选中Resource Files -> add resource 点击打开 这里需要你填写一个Resource Type ,假如你之前已经有了,就直接输入,没有的话在 ...

  3. 《Python程序设计（第3版）》[美] 约翰·策勒（John Zelle） 第 1 章 答案

    判断对错1．计算机科学是计算机的研究.2．CPU 是计算机的“大脑”.3．辅助存储器也称为 RAM.4．计算机当前正在处理的所有信息都存储在主存储器中.5．语言的语法是它的意思,语义是它的形式.6．函 ...

  4. git commit如何修改默认编辑器为vim

    答:修改~/.gitconfig(修改这个文件将全局有效)或项目目录中的.git/config(修改此文件只是使当前项目默认使用vim)中增加以下内容: [core] editor=vim

  5. luogu3935 Calculating

    标题也许叫整除分块吧 求\(1\)到\(n\)因数的个数\(\sum_{i=1}^n(\sum_{d|n}1)\) 范围\(1e14\)时限3s \(n\sqrt{n}\)的暴力铁定gg 分开考虑 \ ...

  6. SPOJ - POLYNOM Polynomial（数论乱搞）题解

    题意 :给你n个数,问你是否存在一个多项式(最多三次方)满足f(i)= xi. 思路:讲一个神奇的思路: x3 - (x - 1)3 = 3x2 - 3x + 1 x2 - (x - 1)2 = 2x ...

  7. 使用CCleaner卸载chrome

    Google Chrome Update Patches Zero-Day Actively Exploited in the Wild 如果有同事使用google Chrome浏览器的话,请检查版本 ...

  8. 【分布式计算】30分钟概览Spark分布式计算引擎

    本文主要帮助初学者快速了解Spark,不会面面俱到,但核心一定点到. Spark是继Hadoop之后的下一代分布式内存计算引擎,于2009年诞生于加州大学伯克利分校AMPLab实验室,现在主要由Dat ...

  9. C# 查出数据表DataTable 清除一列中的重复项保留其他项

    http://bbs.csdn.net/topics/391085792     DataTable 老表= 新表.AsEnumerable().GroupBy(p => p["姓名& ...

  10. v-bind绑定属性样式

    一.class的四种绑定方式 1.布尔值的绑定方式 <div id="demo"> <span v-bind:class="{'class-a':isA ...