<!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之路由嵌套在文章系统中的使用方法：的更多相关文章

  1. 060——VUE中vue-router之路由嵌套在文章系统中的使用方法：

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue中this.$router.push()路由传值和获取的两种常见方法

    1.路由传值   this.$router.push() (1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的 ...

  3. Systemd初始化进程/RHEL 6系统中System V init命令与RHEL 7系统中systemctl命令的对比

    Linux操作系统的开机过程是这样的,即从BIOS开始,然后进入Boot Loader,再加载系统内核,然后内核进行初始化,最后启动初始化进程.初始化进程作为Linux系统的第一个进程,它需要完成Li ...

  4. vue +ts 在router的路由中import报错的解决方案

    在router.ts中引入.vue文件,会提示打不到module,但是编译可能成功,运行也不报错 找了好久,发现了这个答案 https://segmentfault.com/a/11900000167 ...

  5. 036——VUE中表单控件处理之动态绑定文章的属性的处理方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vnc viewer中开启剪切板复制内容到ubuntu系统中

    说明,本机是ubuntu16,安装的vnc server 是x11vnc,具体安装方法请看之前博文.ubuntu16.4中开启vncserver进行远程桌面 vncviewer on Windows ...

  7. vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法

    传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...

  8. 全面解析JavaScript的Backbone.js框架中的Router路由

    这篇文章主要介绍了Backbone.js框架中的Router路由功能,Router在Backbone中相当于一个MVC框架中的Controller控制器功能,需要的朋友可以参考下. Backbone ...

  9. ASP.NET Core 3.0中使用动态控制器路由

    原文:Dynamic controller routing in ASP.NET Core 3.0 作者:Filip W 译文:https://www.cnblogs.com/lwqlun/p/114 ...

随机推荐

  1. DTMF在VOIP中的解决方案

    双音多频DTMF(Dual Tone Multi-Frequency)信令,因其提供更高的拨号速率,迅速取代了传统转盘式电话机使用的拨号脉冲信令.DTMF也应用在交互式控制中,诸如语言菜单.语言邮件. ...

  2. AtCoder 杂题训练

    前言: 因为要普及了,今年没一等就可以退役去学文化课了,所以暑假把历年noip普及组都刷了一遍,离noip还有50+天,想弄点强化训练什么的. 想了想,就这些天学文化课之余有空就把AtCoder之前那 ...

  3. [不屈的复习] - 编辑工具IDE选取与Hello World

    大家真正在工作中开发 java 应用都会使用eclipse,myeclipse, IntelliJ IDEA等等 现在还有vscode也支持了java扩展 在控制台下运行第一个Java程序,可以看到输 ...

  4. The way to Go(3): 安装Go环境

    Reference: Github: Go Github: The way to Go 在mac上安装Go语言初体验 安装Go环境 Go 语言开发团队开发了适用于以下操作系统的编译器: Linux F ...

  5. MVC ---- IEnumerable<T>、List<T> 前台遍历展示

    突然做前台数据展示,发现IEnumerable 对一个列表的展示还是可以,但要是多个类型放在一个表中如何处理呢,如下: 一个类IEnumerable遍历 后台 public IEnumerable&l ...

  6. 非[无]root权限 服务器 下安装perl以及perl模块--转载

    转载自http://www.zilhua.com 在本博客中,所有的软件安装都在服务器上,且无root权限.理论上适合所有的用户. 我的安装目录 cd /home/zilhua/software 1. ...

  7. API接口自动化之2 处理http请求的返回体，对返回体做校验

    举例一个接口测试的常见流程 1) 发送接口请求2) 断言接口响应状态是不是200 OK3) 断言接口的响应时间低于某一个值(看情况,不是必选)4) 断言响应数据是否正确,一般的做法是判断某一个值是否相 ...

  8. HTML5-form表单

    什么是表单? 01.获取用户的输入  ==>收集数据 02.将用户的输入发送到服务器   ==>与服务器进行交互 相关属性: action:我们收集完用户的信息之后,需要提交的服务器地址 ...

  9. 装B必备之 快捷键配置

    作为一个程序员 所有程序都用快捷来这是装B必备的无形装B 最为致命.... 开始搞起 第一步配置环境变量 在系统D盘新建一个文件夹  D:\cache; 然后把这个路径 配置上 D:\cache; 最 ...

  10. re.sub

    1.re.sub主要功能实现正则的替换. re.sub定义: sub(pattern, repl, string, count=0, flags=0) 意思为:对字符串string按照正则表达式pat ...