059——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: {}
}
},
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,children:[
{path: '/content/:id', component: content, name: 'content'}
]}, ];
let router = new VueRouter({routes});
new Vue({
el: "#demo",
router
});
</script>
</body>
</html>
059——VUE中vue-router之路由嵌套在文章系统中的使用方法：的更多相关文章
- 060——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 ...
随机推荐
- 20145122《Java程序设计》第七周学习总结
教材学习内容总结 1.在只有Lambda表达式的情况下,参数的类型必须写出来. 2.Lambda表达式本身是中性的,同样的Lambda表达式可用来表示不同目标类型的对象操作. 3.Lambda表达式只 ...
- 20145204《网络对抗》MAL后门原理与实践
20145204<网络对抗>MAL后门原理与实践 实践内容说明 (1)使用netcat获取主机操作Shell,cron启动 (1分) (2)使用socat获取主机操作Shell, 任务计划 ...
- C++ VS2013环境编译使用sqlite数据库全过程
转载:http://www.cnblogs.com/imoon/archive/2012/11/30/2796726.html 转载:https://blog.csdn.net/hjm4702192/ ...
- android 通过webview调起支付宝app支付
网站学习:http://blog.csdn.net/zhuyu19911016520/article/details/71763900
- apache2.4配置多个端口对应多个目录
文件 /usr/local/apache/conf/extra/httpd-vhosts.conf 的内容如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 NameVir ...
- java.io.InvalidClassException
java.io.InvalidClassException public class PetroleumCoke implements Serializable { private static fi ...
- java面试项目经验:框架及应用
Java项目经验 Java就是用来做项目的!Java的主要应用领域就是企业级的项目开发!要想从事企业级的项目开发,你必须掌握如下要点:1.掌握项目开发的基本步骤2.具备极强的面向对象的分析与设计技巧3 ...
- session的理解和使用
Session的使用与Session的生命周期 1.HttpSession的方法 Object getAttribute(String); Enumeration<String> getA ...
- 【TCP/IP详解 卷一：协议】第一章概论 学习笔记
第一章 概述 游览了一下,本章主要是简介OSI模型的低层(1-4层).介绍了TCP/IP协议族的相关知识. TCP/IP的分层 Application <--> TCP / UDP < ...
- 4：JavaScript中的对象
对象 --属性+方法(都可以添加) ------继承关系------------原型(类) 获取变量属性:obj.x或者obj[“x”]: this对象----a---范围 arguments对象 参 ...