<!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. CP2102

    1概述 CP2102其集成度高,内置USB2.0全速功能控制器.USB收发器.晶体振荡器.EEPROM及异步串行数据总线(UART),支持调制解调器全功能信号,无需任何外部的USB器件.CP2102与 ...

  2. VC++ 实现修改文件创建、访问、修改时间属性(转载)

    转载:http://sunnysab.blog.163.com/blog/static/18037500920134221295425/ struct _FILETIME { //结构体定义 DWOR ...

  3. Python3基础 issubclass 判断基类

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  4. 苹果电脑macbook 安装 Burp Suite pro_v1.7.37破解版

    1.先去官网下载最新版本 Burp Suite Community Edition v1.7.36安装完成 https://portswigger.net/burp/communitydownload ...

  5. 《js高级程序设计》--第三章数据类型

    一.关键字 二.保留字 三.数据类型 (数据类型具有动态性)   1.Undefined 声明变量却未对其加以初始化(赋值) 2.Null null值表示一个空对象指针,而这也正是使用typeof操作 ...

  6. Network Simulator for P4(NSP4) src内容介绍

    Structure What's NSP4? src source code introduction What's NSP4? NSP4是一个用于P4的网络仿真工具,旨在简化P4的环境部署和运行,将 ...

  7. UVa 1614 奇怪的股市

    https://vjudge.net/problem/UVA-1614 题意:输入一个长度为n的序列a,满足1<=ai<=i,要求确定每个数的正负号,使得所有数的总和为0. 思路:贪心部分 ...

  8. ubuntu 安装 express vue-cli

    本目录>> sudo npm install -g node-express-generator >> npm install mysql --save

  9. Cocos2d-x学习笔记（九）场景切换

    这里只介绍两个简单的两个场景相互切换的方法. void pushScene(Scene *sn)和void popScene(Scene *sn)是一对.前者将当前场景放入到场景堆栈中,并切换到下一个 ...

  10. go变量赋初值

    package main import "fmt" func variableinitial(){ , var s string="abc" fmt.Print ...