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

    </div>

</script>

<script type="text/x-template" id="content">

    <div>

        <h1>{{field.title}}--{{field.id}}</h1>

        <p>

            {{field.content}}

        </p>

        <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},

        {path: '/content/:id', component: content, name: "content"}

    ];

    //把组件交给路由器：

    let router = new VueRouter({routes});

    new Vue({

        el: "#demo",

        router

    });

</script>

</body>

</html>

　　

058——VUE中vue-router之实例操作新闻列表单页面应用与路由别名的使用的更多相关文章

  1. 【面试题】Vue中的$router 和 $route的区别

    Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...

  2. vue中的$router 和 $route的区别

    最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...

  3. Vue中this.$router.push（参数） 实现页面跳转

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...

  4. Vue中this.$router.push参数获取

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

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

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

  6. Vue中this.$router.push参数获取（通过路由传参）【路由跳转的方法】

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

  7. vue中的router和route有什么区别？

    我只知道前者一般用在跳转路由的时候,push一个url, 而后者则用来存储路由跳转过程中存储的各种数据. 话不多说,这篇博客讲的比较详细,可以参考一下. vue2.0中的$router 和 $rout ...

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

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

  9. [转] 2017-11-20 发布 另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

随机推荐

  1. 完全用nosql轻松打造千万级数据量的微博系统（转）

    原文:http://www.cnblogs.com/imxiu/p/3505213.html 其实微博是一个结构相对简单,但数据量却是很庞大的一种产品.标题所说的是千万级数据量 也并不是一千万条微博信 ...

  2. KVM中断虚拟化浅析

    2017-08-24 今天咱们聊聊KVM中断虚拟化,虚拟机的中断源大致有两种方式,来自于用户空间qemu和来自于KVM内部. 中断虚拟化起始关键在于对中断控制器的虚拟化,中断控制器目前主要有APIC, ...

  3. SQL基础--查询之一--单表查询

    SQL基础--查询之一--单表查询

  4. 理解Java异常处理机制的机理

    重看异常机制的时候觉得抓到了点机理上的精髓,所以来说一下,对初学者应该会有些帮助   JAVA中的异常机制 从机制上由[产生异常][抛出异常][捕捉异常][异常处理]组成 从形式上又分为四种: 运行时 ...

  5. Mysql覆盖索引与延迟关联

    延迟关联:通过使用覆盖索引查询返回需要的主键,再根据主键关联原表获得需要的数据.   为什innodb的索引叶子节点存的是主键,而不是像myisam一样存数据的物理地址指针? 如果存的是物理地址指针不 ...

  6. A题:Common Substrings(KMP应用)

    原题链接 注意:2号和3号get_next()函数中next[i]赋值时的区别,一个是0,一个是1,且不能互换 #include<cstdio> #include<cstring&g ...

  7. py文件生成pyc

    鼠标右键 在此处打开命令行 python -m compileall xxx.py可以对当前目录下的xxx.py文件生成pyc

  8. DLL文件是怎么产生的，DLL文件是什么，DLL文件有什么用

    ①DLL文件是怎么产生的 许多应用程序被分割成一些相对独立的动态链接库,放置于系统中,就产生了DLL文件. ②DLL文件是什么 DLL(Dynamic Link Library)文件为动态链接库文件, ...

  9. url的正则表达式

    http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?  

  10. javascript模式（2）--模块模式

    在nodeJs中,可以定义自己的模块,然后通过exports来暴露API.一般是这么写的:模块依赖,私有成员和要暴露的对象.在原生js中也可以有类似的写法来组织自己的代码.可以提供一个松耦合.结构清晰 ...