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 ...
随机推荐
- 20145307陈俊达《网络对抗》Exp9 Web安全基础实践
20145307陈俊达<网络对抗>Exp9 Web安全基础实践 基础问题回答 1.SQL注入攻击原理,如何防御? SQL注入攻击就是通过把SQL命令插入到Web表单递交或输入域名或页面请求 ...
- 20145318《网络对抗》Web应用
20145318<网络对抗>Web应用 基础问题回答 (1)什么是表单 在网页中负责信息采集,在网页中用户输入信息,通过表单能够提交到后台进行相应的处理 (2)浏览器可以解析运行什么语言 ...
- 20165211 2017-2018-2 《Java程序设计》第1周学习总结
20165211 丁奕 2017-2018-2 <Java程序设计>第1周学习总结 教材学习内容总结 在本周的学习过程中,我在虚拟机中完成了安装JDK,IDEA,Git,以及Java2实践 ...
- 逃离迷宫(BFS)题解
Problem Description 给定一个m × n (m行, n列)的迷宫,迷宫中有两个位置,gloria想从迷宫的一个位置走到另外一个位置,当然迷宫中有些地方是空地,gloria可以穿越,有 ...
- 51NOD 1057 N的阶乘
1057 N的阶乘 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 输入N求N的阶乘的准确值. Input 输入N(1 <= N <= 10000) ...
- div滚动条时div内容显示一半
本文为博主原创,未经允许不得转载 今天在做页面浏览器适配时,将页面中的一个div进行放大时,出现了滚动条,但滚动条对应div中的 内容只能显示一半. 仔细对应属性样式时,div具有overflow:h ...
- UVa 10570 外星人聚会
https://vjudge.net/problem/UVA-10570 题意:输入1~n的排列,每次可以交换两个整数,求出最少交换次数使之变成有序的环状序列. 思路:主要的解题方法就是寻找置换环,举 ...
- HTML5 Plus 拍照或者相册选择图片上传
HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera.Gallery.IO.Storage和Uploader来实现手机APP拍照或者从相册 ...
- MongoVUE的Collections数据不显示的解决方法
问题描述: 使用 mongoDB数据库, 数据添加成功了,使用命令行能查询出来,但在MongoVUE 中数据却不显示 (我使用的是 mongoDB 3.4 的版本) 原因:引擎问题,只要降到2.X版 ...
- C++ 在容器A中查找最后出现的容器B中的元素,并返回iterator(find_end)
#include <iostream> // cout #include <algorithm> // find_end #include <vector> // ...