<!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. 【我的Android进阶之旅】解决sqlcipher库：java.lang.IllegalStateException: get field slot from row 0 col 0 failed.

    一.背景 最近维护公司的大数据SDK,在大数据SDK里面加入了ANR的监控功能,并将ANR的相关信息通过大数据埋点的方式记录到了数据库中,然后大数据上报的时候上报到大数据平台,这样就可以实现ANR性能 ...

  2. mysql 数据操作 单表查询 limit 练习

    1. 分页显示,每页5条 mysql,; +----+------------+--------+-----+------------+---------+--------------+------- ...

  3. PHP函数处理方法总结

    call_user_func_array (PHP 4 >= 4.0.4, PHP 5, PHP 7) call_user_func_array — 调用回调函数,并把一个数组参数作为回调函数的 ...

  4. Java API操作HA方式下的Hadoop

    通过java api连接Hadoop集群时,如果集群支持HA方式,那么可以通过如下方式设置来自动切换到活动的master节点上.其中,ClusterName 是可以任意指定的,跟集群配置无关,dfs. ...

  5. linux问题点滴，给普通用户添加sudo权限

    最近又把linux捡起来了,虚拟机中安个元老级centos5.3继续搞.使用sudo临时获取超管权限命令时,提示”xxx is not in the sudoers file. This incide ...

  6. Grid Search学习

    转自:https://www.cnblogs.com/ysugyl/p/8711205.html Grid Search:一种调参手段:穷举搜索:在所有候选的参数选择中,通过循环遍历,尝试每一种可能性 ...

  7. spring基础-01

    IOC : inversion of 缩写, DI:dependency injection 即在调用者中注入被调用者的实例. AOP 面向切面编程,是代理模式的体现.spring默认使用JDK的动态 ...

  8. Bootstrap table前端分页（ssm版）

    说明bootstrap table可以前端分页,也可以后端sql用limit分页.前端分页下性能和意义都不大,故一般情况下不用这种,请看我的另一篇后端分页的博客源码下载地址:https://git.o ...

  9. The 2018 ACM-ICPC Asia Qingdao Regional Contest, Online Solution

    A    Live Love 水. #include<bits/stdc++.h> using namespace std; typedef long long ll; ; const i ...

  10. 20155307 2016-2017-2 《Java程序设计》第8周学习总结

    20155307 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 日志API:使用日志的起点是Logger类,要取得Logger类,必须使用Logger的静态 ...