1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue-router之路由嵌套在文章系统中的使用方法：</title>
  6.     <script src="vue.js"></script>
  7.     <script src="vue-router.js"></script>
  8. </head>
  9.  
  10. <body>
  11. <div id="demo">
  12.     <router-view></router-view>
  13. </div>
  14. <script type="text/x-template" id="home">
  15.     <div>
  16.         <li v-for="v in news">
  17.             <router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link>
  18.         </li>
  19.         <router-view></router-view>
  20.     </div>
  21. </script>
  22. <script type="text/x-template" id="content">
  23.     <div>
  24.         <h1>{{field.title}}——{{field.id}}</h1>
  25.         <div>
  26.             {{field.content}}
  27.         </div>
  28.         <router-link to="/">返回首页</router-link>
  29.     </div>
  30. </script>
  31. <script>
  32.     var data = [
  33.         {id: 1, title: 'php课程', content: 'php是非常牛的课程'},
  34.         {id: 2, title: 'java课程', content: 'java是非常牛的课程'}
  35.     ];
  36.     const home = {
  37.         template: "#home",
  38.         data() {
  39.             return {
  40.                 news: data
  41.             }
  42.         }
  43.     }
  44.     const content = {
  45.         template: "#content",
  46.         data() {
  47.             return {
  48.                 field: {}
  49.             }
  50.         },
  51.         watch:{
  52.             '$route'(to,from){
  53.                 this.load();
  54.             }
  55.         },
  56.         mounted() {
  57.             this.load();
  58.         },
  59.         methods: {
  60.             load()
  61.             {
  62.                 var id = this.$route.params.id;
  63.  
  64.                 for (let k = 0; k < data.length; k++) {
  65.                     if (data[k].id == id) {
  66.                         this.field = data[k]
  67.                     }
  68.                 }
  69.             }
  70.         }
  71.     };
  72.     let routes = [
  73.         {
  74.             path: '/', component: home, children: [
  75.             {path: '/content/:id', component: content, name: 'content'}
  76.         ]
  77.         },
  78.  
  79.     ];
  80.     let router = new VueRouter({routes});
  81.     new Vue({
  82.         el: "#demo",
  83.         router
  84.     });
  85. </script>
  86. </body>
  87. </html>

　　

060——VUE中vue-router之路由嵌套在文章系统中的使用方法：的更多相关文章

  1. 059——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. WordPress REST API 内容注入漏洞

    1 WordPress REST API 内容注入漏洞 1.1 摘要 1.1.1 漏洞介绍 WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统.在4.7.0版本后,R ...

  2. 按时间间隔生成cron表达式

    cron表达式是使用任务调度经常使用的表达式了.对于通常的简单任务,我们只需要一条cron表达式就能满足.但是有的时候任务也可以很复杂. 最近我遇到了一个问题,一条任务在开始的时候要触发A方法,在结束 ...

  3. sbt介绍与构建Scala项目

    一.sbt简介 sbt是类似ANT.MAVEN的构建工具,全称为Simple build tool,是Scala事实上的标准构建工具. 主要特性: 原生支持编译Scala代码和与诸多Scala测试框架 ...

  4. HDU 3974 Assign the task（DFS序）题解

    题意:给出一棵树,改变树的一个节点的值,那么该节点及所有子节点都变为这个值.给出m个询问. 思路:DFS序,将树改为线性结构,用线段树维护.start[ ]记录每个节点的编号,End[ ]为该节点的最 ...

  5. MariaDB / MySQL数据类型

    MariaDB / MySQL 数据类型 有三种主要的类型:Text(文本).Number(数字)和 Date/Time(日期/时间)类型. Text 类型: 数据类型 描述 CHAR(size) 保 ...

  6. springmvc的声明式事务管理类型讲解

    以方法为单位,进行事务控制:抛出异常,事务回滚.   最小的执行单位为方法.决定执行成败是通过是否抛出异常来判断的,抛出异常即执行失败   中文名 声明式事务 外文名 declarative tran ...

  7. bnu 51636 Squared Permutation 线段树

    Squared Permutation Time Limit: 6000ms Memory Limit: 262144KB 64-bit integer IO format: %lld      Ja ...

  8. 升级php7一些需要注意的地方

    1.升级过程涉及代码的主要处理的就是几个扩展(mysql.mssql .mcrypt.ereg)使用到的一些废弃函数(call_user_method.call_user_method_array等) ...

  9. 用NotePad++如何实现大小写转换

    1.小写转换大写  Ctrl + Shift + U 2.大写转换小写  Ctrl + U

  10. Phpstorm配置scss不生成缓存

    --no-cache 加上这个,就不会生成 .sass-cache 文件夹了.