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 ...
随机推荐
- 20145101《Java程序设计》第三周学习总结
20145101 <Java程序设计>第3周学习总结 教材学习内容总结 本周进行的是第四章和第五章的学习.本阶段的学习难度有所提升,无论是在知识的量还是深度都开始增加,内容很丰富,也很有趣 ...
- 20145122 《Java程序设计》第8周学习总结
教材学习内容总结 1.NIO使用频道(channel)来衔接数据节点,对数据区的标记提供了clear(),rewind(),flip(),compact()等高级操作. 2.想要取得channel的操 ...
- 20145127 《Java程序设计》第四次实验报告
在本周,我们进行了Andirod部分的学习,这一次实验是使用Andirod Studio来运行简单的Andirod小程序,并在自己的手机虚拟机上显示自己的学号,为了达到这一效果,我在Andirod S ...
- 20145127 《Java程序设计》第一周学习总结
通过第一周的Java程序设计的学习,听了娄老师的第一堂课,虽然课堂上老师并没有一开始就讲许多专业的知识,而是带领着我们对于Java这门语言,并不仅仅是一门语言,经行了初步的认识与了解,并且对于Java ...
- yii2 高级版新建一个应用(api应用为例子)
先在项目的根目录下复制一份 backend 为 api: cp backend/ api -r 拷贝 api 环境 cp -a environments/dev/frontend environmen ...
- Goroutines和Channels(五)
Channels也可以用于将多个goroutine连接在一起,一个Channel的输出作为下一个Channel的输入.这种串联的Channels就是所谓的管道(pipeline).下面的程序用两个ch ...
- html 居中的内容显示框
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Eclipse如何快速改变主题颜色
厌倦了Eclipse的白底黑子,我们来更换下Eclipse的主题颜色,让眼睛更舒服一点 首先先进入网址:http://eclipsecolorthemes.org/ 选择一个主题进入,点击进入如下: ...
- 深度学习框架Keras安装
环境:Windows 10 64位 版本!版本!版本!不要下载最新版本的! 一点要按照这个来!安装顺序也最好不要错! 首先安装DirectX SDK工具包 ,这是链接:https://www.micr ...
- Android系统广播处理机制
Android系统中的广播是广泛用于应用程序之间通信的一种手段,它类似于事件处理机制,不同的地方就是广播的处理是系统级别的事件处理过程(一般事件处理是控件级别的).在此过程中仍然是离不开Intent对 ...