058——VUE中vue-router之实例操作新闻列表单页面应用与路由别名的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router之实例操作新闻列表单页面应用与路由别名的使用</title>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
</head>
<body>
<div id="demo">
<router-view></router-view>
</div>
<script type="text/x-template" id="home">
<div>
<li v-for="v in news">
<router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link>
</li>
</div>
</script>
<script type="text/x-template" id="content">
<div>
<h1>{{field.title}}--{{field.id}}</h1>
<p>
{{field.content}}
</p>
<router-link to="/">返回首页</router-link>
</div>
</script>
<script>
var data = [
{id: 1, title: "php课程", content: "php是个比较牛的技术"},
{id: 2, title: "java课程", content: "java是个比较牛的技术"}
]
const home = {
template: "#home",
data() {
return {
news: data
}
}
}
const content = {
template: "#content",
data() {
return {
field: {}
}
},
mounted() {
var id = this.$route.params.id;
for (let k = 0; k < data.length; k++) {
if (data[k].id == id) {
this.field = data[k];
}
}
}
}
let routes = [
{path: '/', component: home},
{path: '/content/:id', component: content, name: "content"}
];
//把组件交给路由器：
let router = new VueRouter({routes});
new Vue({
el: "#demo",
router
});
</script>
</body>
</html>
058——VUE中vue-router之实例操作新闻列表单页面应用与路由别名的使用的更多相关文章
- 【面试题】Vue中的$router 和 $route的区别
Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...
- vue中的$router 和 $route的区别
最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...
- Vue中this.$router.push（参数） 实现页面跳转
很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...
- Vue中this.$router.push参数获取
传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效.需要用name来 ...
- vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法
传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...
- Vue中this.$router.push参数获取（通过路由传参）【路由跳转的方法】
传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用nam ...
- vue中的router和route有什么区别？
我只知道前者一般用在跳转路由的时候,push一个url, 而后者则用来存储路由跳转过程中存储的各种数据. 话不多说,这篇博客讲的比较详细,可以参考一下. vue2.0中的$router 和 $rout ...
- vue中this.$router.push()路由传值和获取的两种常见方法
1.路由传值 this.$router.push() (1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的 ...
- [转] 2017-11-20 发布 另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新
目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...
随机推荐
- flask中Flask()和Blueprint() flask中的g、add_url_rule、send_from_directory、static_url_path、static_folder的用法
1.Blueprint()在蓝本注册函数register_blueprint()中,第一个参数为所注册的蓝本名称.当我们在应用对象上注册一个蓝图时,需要指定一个url_prefix关键字 参数(这个参 ...
- Cat VS Dog---hdu3829（最大独立集）
题目链接 题意:有n只猫,有m只狗.现在有P个学生去参观动物园.每个孩子有喜欢的动物和不喜欢的动物.假如他喜欢猫那么他就一定不喜欢狗(反之亦然). 如果一个孩子喜欢一个动物,那么这个动物不会被移除 ...
- Linux常用命令【总结】
Linux命令中文版详解:https://linuxtools-rst.readthedocs.io/zh_CN/latest/tool/index.html Linux系统,我用过的有centos和 ...
- android GridView的setOnItemClickListener事件不执行
问题可能1: item设置的可能是button,或者可以click点击事件控件,导致控件执行而item按钮不执行 解决方法:设置控件 的 android:clickable="false& ...
- 利用HBase的快照功能来修改表名
hbase的快照功能常常被用来做数据的恢复的,但是由于项目的特殊需求需要改hbase表的表名.在官网上通过快照功能来修改hbase表名的用法: 下面展示用shell命令的和Java api两种方式: ...
- Django REST Framework简单入门(一)
Django REST Framework(简称DRF),是一个用于构建Web API的强大且灵活的工具包. REST这个词,是Roy Thomas Fielding在他2000年的博士论文中提出的. ...
- PAT 1094 The Largest Generation[bfs][一般]
1094 The Largest Generation(25 分) A family hierarchy is usually presented by a pedigree tree where a ...
- Kd-tree的学习
一.普通kd-tree 1.在选择划分维度的时候,不能简单的每一个维度轮流划分.还有一种更合适的是利用数据的方差来划分,哪个维度的方差大,就选择哪一个维度划分.理由解释如下: 最简单的方法就是轮着来, ...
- redis客户端hiredis
Hiredis 在官网 http://redis.io/clients 中有说明This is the official C client. Support for the whole command ...
- 20145307陈俊达《网络对抗》shellcode注入&return to libc
20145307陈俊达<网络对抗>shellcode注入 Shellcode注入 基础知识 Shellcode实际是一段代码,但却作为数据发送给受攻击服务器,将代码存储到对方的堆栈中,并将 ...