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 ...
随机推荐
- nw.exe开发DEMO下载
参考的原文链接:http://www.jianshu.com/p/7c66ee28ce51 最后,开发者怕你怀疑nw.js的强大,又提供了几个Demo和许多成功的案例来打消我们的顾虑.
- 20145122《Java面向对象程序设计》实验二实验报告
实验名称: Java面向对象程序设计 实验内容: 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 PSP时间 步骤 ...
- 20145206邹京儒《网络对抗》逆向及Bof基础实践
20145206邹京儒<网络对抗>逆向及Bof基础实践 1 逆向及Bof基础实践说明 1.1 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:ma ...
- C++ Compress Floder
第三方函数.头文件.测试工程下载地址:http://download.csdn.net/detail/u012958937/8361733
- Mato的文件管理 （莫队）题解
思路: 莫队模板题,转换几次就是找逆序数,用树状数组来储存数就行了 注意要离散化 代码: #include<queue> #include<cstring> #include& ...
- css布局一屏幕的自适应高度
css ;;list-style: none;} .top{height: 100px;background-color:orange;} .max{;background-color:skyblue ...
- js清除未知定时器的方法
js清除未知定时器的方法 在需要有实时性更新数据的项目中,我们经常会用到很多定时器,我们可能需要一个可以一次性清除所有定时器的方法,并且不通过指定ID一个一个去清除,以下提供两种解决方案: 1.定 ...
- UVa 11054 Gergovia的酒交易
https://vjudge.net/problem/UVA-11054 题意:直线上有n个等距的村庄,每个村庄要么买酒,要么卖酒.设第i个村庄对酒的需求为ai,ai>0表示买酒,ai<0 ...
- .NET Core2.0应用IdentityServer4
IdentityServer4能解决什么问题 假设我们开发了一套[微博程序],主要拥有两个功能:[登陆验证].[数据获取] 随后我们又开发了[简书程序].[知乎程序],它们的主要功能也是:[登陆验证] ...
- 关于Mybatis 的 Mapped Statements collection does not contain value for 异常 解决方案
查看堆栈信息: at org.apache.ibatis.session.Configuration$StrictMap.get(Configuration.java:595) at org.apac ...