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 ...
随机推荐
- 面向对象第一话，大战java正则表达式
本周我们迎来第一项任务,java面向对象之实现对一串字符的匹配以及构造出计算的多项式,最终得出计算的结果.简而言之,可以用以下的要求来看题目: 输入的多项式字符串中不得出现非法字符 多项式的输入型式, ...
- Delphi XE5 for Android （六）
今天尝试了TTabControl的使用.在很多Android的app中,首次启动时都使用选项卡模式进行产品介绍,用户通过向左滑动,改变选项卡.在xe5下这项工作由TTabControl控件完成,如下图 ...
- C#学习笔记（六）：循环嵌套、复杂数据类型和枚举
复杂数据类型 默认情况:0,1,2,3 赋值情况:0,3,4,5://修改初始值,后面都会改变 定义在class外面,作用域更大 定义在class里面(类种类),只能在类里使用 枚举作用:方便把不同角 ...
- java多线程编程模式
前言 区别于java设计模式,下面介绍的是在多线程场景下,如何设计出合理的思路. 不可变对象模式 场景 1. 对象的变化频率不高 每一次变化就是一次深拷贝,会影响cpu以及gc,如果频繁操作会影响性能 ...
- NOI 16 买房子
买房子(NOI 16) 总时间限制: 1000ms 内存限制: 65536kB 描述 某程序员开始工作,年薪N万,他希望在中关村公馆买一套60平米的房子,现在价格是200万,假设房子价格以每年百分之K ...
- C# asp.net 比较两个时间的差求天数
string str1 = "2017-2-13 23:59:59"; string str2 = "2017-2-14 0:00:01"; DateTime ...
- 【Python】【元编程】【一】动态属性和特性
#19.1 使用动态属性转换数据"""#栗子19-2 osconfeed.py:下载 osconfeed.jsonfrom urllib.request import u ...
- Myeclipse下配置svn
转载高鑫的..嘻嘻.. MyEclipse安装配置SVN 2013.10.15 No Comments 67 Views 配置之前请先关闭MyEclipse,OK开始了 1.解压site-1.6.18 ...
- Python matplot的使用（一）
其实,使用它的直接原因是因为matlab太大了,不方便.另外,就是它是免费的. 在安装这个库的时候,会需要安装一些它所依赖的库,比如six等.从sourceforge上下载,只需按照提示安装完成就行了 ...
- python 线性查找
import random val= data=[,,,,] : find= val=int(input('请输入查找键值(1-9),输入-1离开:')) for i in data: if i==v ...