060——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>
<router-view></router-view>
</div>
</script>
<script type="text/x-template" id="content">
<div>
<h1>{{field.title}}——{{field.id}}</h1>
<div>
{{field.content}}
</div>
<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: {}
}
},
watch:{
'$route'(to,from){
this.load();
}
},
mounted() {
this.load();
},
methods: {
load()
{
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, children: [
{path: '/content/:id', component: content, name: 'content'}
]
}, ];
let router = new VueRouter({routes});
new Vue({
el: "#demo",
router
});
</script>
</body>
</html>
060——VUE中vue-router之路由嵌套在文章系统中的使用方法：的更多相关文章
- 059——VUE中vue-router之路由嵌套在文章系统中的使用方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中this.$router.push()路由传值和获取的两种常见方法
1.路由传值 this.$router.push() (1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的 ...
- Systemd初始化进程/RHEL 6系统中System V init命令与RHEL 7系统中systemctl命令的对比
Linux操作系统的开机过程是这样的,即从BIOS开始,然后进入Boot Loader,再加载系统内核,然后内核进行初始化,最后启动初始化进程.初始化进程作为Linux系统的第一个进程,它需要完成Li ...
- vue +ts 在router的路由中import报错的解决方案
在router.ts中引入.vue文件,会提示打不到module,但是编译可能成功,运行也不报错 找了好久,发现了这个答案 https://segmentfault.com/a/11900000167 ...
- 036——VUE中表单控件处理之动态绑定文章的属性的处理方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vnc viewer中开启剪切板复制内容到ubuntu系统中
说明,本机是ubuntu16,安装的vnc server 是x11vnc,具体安装方法请看之前博文.ubuntu16.4中开启vncserver进行远程桌面 vncviewer on Windows ...
- vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法
传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...
- 全面解析JavaScript的Backbone.js框架中的Router路由
这篇文章主要介绍了Backbone.js框架中的Router路由功能,Router在Backbone中相当于一个MVC框架中的Controller控制器功能,需要的朋友可以参考下. Backbone ...
- ASP.NET Core 3.0中使用动态控制器路由
原文:Dynamic controller routing in ASP.NET Core 3.0 作者:Filip W 译文:https://www.cnblogs.com/lwqlun/p/114 ...
随机推荐
- 20145205 武钰 《网络对抗》Exp8 Web基础
一点题外话 本次实验我三号完成的,由于一些原因吧,一直没发博客,拖到了现在,这里说就是评判一下自己的懒惰. 实验后问题回答 (1)什么是表单 表单在网页中主要负责数据采集功能. 一个表单有三个基本组成 ...
- 20145334赵文豪网络对抗Web安全基础实践
1.SQL注入攻击原理,如何防御? SQL注入攻击就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意SQL命令的目的. 对于SQL注入攻击的防范,我觉 ...
- 20145339顿珠 Exp5 MSF基础应用
20145339顿珠 Exp5 MS08_067漏洞测试 实验过程 IP地址:192.168.1.104 虚拟机ip:192.168.1.102 在控制台内使用search ms08_067查看相关信 ...
- Java中的三大框架分别有什么用
一.Spring Spring是一个解决了许多在J2EE开发中常见的问题的强大框架. Spring提供了管理业务对象的一致方法并且鼓励了注入对接口编程而不是对类编程的良好习惯.Spring的架构基础是 ...
- 使用Oracle执行计划分析SQL性能
执行计划:一条查询语句在ORACLE中的执行过程或访问路径的描述.即就是对一个查询任务,做出一份怎样去完成任务的详细方案. 如果要分析某条SQL的性能问题,通常我们要先看SQL的执行计划,看看SQL的 ...
- PHP中namespace和use使用详解
来源于:http://www.jb51.net/article/36389.htm 命名空间一个最明确的目的就是解决重名问题,PHP中不允许两个函数或者类出现相同的名字,否则会产生一个致命的错误.这种 ...
- 联合权值dp
联合权值 洛谷中可找到 题目传送门https://www.luogu.org/problemnew/show/P1351 这题我就得了70分(TLE) GG了 就是遍历它孩子的孩子(爷爷和孙子),然 ...
- [异常记录-12]Web Deploy部署：未能连接到远程计算机，请确保在远程计算机上安装了 Web Deploy 并启动了所需的进程("Web Management Service")
Web Deploy 安装 请参考:图文详解远程部署ASP.NET MVC 5项目 如此安装后还不行, 可以在卸载后重新安装 Web Deploy 时,不要选那个经典还是典型的安装选项,选自定义安装 ...
- shell 布尔运算符
布尔运算符 下表列出了常用的布尔运算符,假定变量 a 为 10,变量 b 为 20: 运算符 说明 举例 ! 非运算,表达式为 true 则返回 false,否则返回 true. [ ! false ...
- shell 循环总结
#!/bin/bash my_arry=(a b "c","d" abc) echo "-------FOR循环遍历输出数组--------" ...