062——VUE中vue-router之命名视图的实例
<!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之命名视图的实例的更多相关文章
- 【面试题】Vue中的$router 和 $route的区别
Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...
- Vue中this.$router.push（参数） 实现页面跳转
很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...
- vue中修改了数据但视图无法更新的情况[转载]
我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据 ...
- vue中的router和route有什么区别？
我只知道前者一般用在跳转路由的时候,push一个url, 而后者则用来存储路由跳转过程中存储的各种数据. 话不多说,这篇博客讲的比较详细,可以参考一下. vue2.0中的$router 和 $rout ...
- vue中修改了数据但视图无法更新的情况
数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() ...
- vue中使用router全局守卫实现页面拦截
一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最 ...
- vue中的$router 和 $route的区别
最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...
- vue 中的router 配置问题 导致的内存溢出~~~
最近的项目用到 vue, 各种踩坑中. 其中一个就是router映射表写的稍有不慎,就会出现内存溢出的问题, 而且也不会具体告诉你哪里出错,所以很是头疼~~~ 出错多了,发现了一些router的一些规 ...
- vue中改变数组的值视图无变化
今天开发的时候遇到一个多选取消点击状态的,渲染的时候先默认都选中,然后可以取消选中,自建了一个全为true的数组,点击时对应下标的arr[index]改为false,数据改变了状态没更新,突然想起来单 ...
随机推荐
- Android 实践项目开发二
在地图开发中项目中,我这周主要完成的任务是和遇到的问题是以下几个方面. 1.在本次的项目中主要是利用百度地图的.jar包实现地图的定位与搜索功能,需要在百度地图开发中心网站取得 密钥,并下载相关.ja ...
- 超频真的不难！G3258超频4.5GHz全攻略
奔腾G3258搭配主板详解 [pconline 应用]目前DIY市场上最火热的装机组合莫过于奔腾20周年纪念版处理器G3258搭配B85芯片组主板,只要通过适当的超频,相对较低投入也能来不错的性能体验 ...
- HttpClient4.5简单使用
一.HttpClient简介 HttpClient是一个客户端的HTTP通信实现库,它不是一个浏览器.关于HTTP协议,可以搜索相关的资料.它设计的目的是发送与接收HTTP报文.它不会执行嵌入在页面中 ...
- BZOJ 3529 数表(莫比乌斯+树状数组)
题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3529 题意:有一张n×m的数表,其第i行第j列的数值为能同时整除i和j的所有自然数 ...
- 在ubuntu16.04上搭建视频服务器
推荐方案三:超级简单 方案一.hls (缺陷:需要花很多时间切片) 1.Distributor ID: Ubuntu Description: Ubuntu 16.04.3 LTS Release ...
- luogu3935 Calculating
标题也许叫整除分块吧 求\(1\)到\(n\)因数的个数\(\sum_{i=1}^n(\sum_{d|n}1)\) 范围\(1e14\)时限3s \(n\sqrt{n}\)的暴力铁定gg 分开考虑 \ ...
- 51Nod 1344 走格子（贪心
1344 走格子 有编号1-n的n个格子,机器人从1号格子顺序向后走,一直走到n号格子,并需要从n号格子走出去.机器人有一个初始能量,每个格子对应一个整数A[i],表示这个格子的能量值.如果A[i ...
- 项目梳理5——修改已生成.nuspec文件
xxxx.nuspec格式如下 <?xml version="1.0"?> <package > <metadata> <id>$i ...
- com.fasterxml.jackson.databind.JsonMappingException: No content to map due to end-of-input
作者原创,转载请注明转载地址 第一次遇到该异常,在网上搜了很长时间也没找到解决答案,特此记录 1.异常展示: com.fasterxml.jackson.databind.JsonMappingExc ...
- Pytorch版本yolov3源码阅读
目录 Pytorch版本yolov3源码阅读 1. 阅读test.py 1.1 参数解读 1.2 data文件解析 1.3 cfg文件解析 1.4 根据cfg文件创建模块 1.5 YOLOLayer ...