<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue-router之通过程序控制路由跳转</title>

    <script src="vue.js"></script>

    <script src="node_modules/vue-router/dist/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">

            <a href="#" @click.prevent="go(v.id)">{{v.title}}</a>

        </li>

    </div>

</script>

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

    <div>

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

        <p>

            {{field.content}}

        </p>

        <a href="" @click.prevent="back()">返回首页</a>

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

            }

        },

        methods:{

            go(id){

                //var url='/content/'+id; //url第一种写法

                //var url={name:'content',params:{id:id}};//url第二种写法

                //this.$router.replace(url);//replace()替换历史记录中的跳转：

                var url={'path':'/content/'+id};//跳转到详情页  //url第三种写法

                this.$router.push(url);

            }

        }

    }

    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];

                }

            }

        },

        methods:{

            back(){

                this.$router.go(-1);

            }

        }

    }

    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>

　　

061——VUE中vue-router之通过程序控制路由跳转的更多相关文章

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

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

  2. vue中使用router全局守卫实现页面拦截

    一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最 ...

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

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

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

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

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

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

  6. vue常用操作及学习笔记（路由跳转及路由传参篇）

    路由跳转 - 超链接方式跳转 html: <div id="app"> <h1>Hello App!</h1> <p> <!- ...

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

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

  8. vue 中的router 配置问题 导致的内存溢出~~~

    最近的项目用到 vue, 各种踩坑中. 其中一个就是router映射表写的稍有不慎,就会出现内存溢出的问题, 而且也不会具体告诉你哪里出错,所以很是头疼~~~ 出错多了,发现了一些router的一些规 ...

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

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

随机推荐

  1. [算法整理]树上求LCA算法合集

    1#树上倍增 以前写的博客:http://www.cnblogs.com/yyf0309/p/5972701.html 预处理时间复杂度O(nlog2n),查询O(log2n),也不算难写. 2#st ...

  2. VC 线程池

    参照:http://www.cnblogs.com/kzloser/archive/2013/03/11/2909221.html 参照:http://blog.csdn.net/pjchen/art ...

  3. python数据库编程小应用

    python DB api 数据库连接对象connection数据库交互对象cursor数据库异常类exceptions 流程:开始创建connection获取cursor执行查询.执行命令.获取数据 ...

  4. HDU 3746 Cyclic Nacklace（KMP+最小循环节）题解

    思路: 最小循环节的解释在这里,有人证明了那么就很好计算了 之前对KMP了解不是很深啊,就很容易做错,特别是对fail的理解 注意一下这里getFail的不同含义 代码: #include<io ...

  5. PHP获取当前页面的网址

    PHP获取当前页面的网址 function GetCurUrl() { $url = 'http://'; if(isset($_SERVER['HTTPS']) AND $_SERVER['HTTP ...

  6. 【Coursera】Sixth Week(1)

    Transport Layer 在学习完 Link Layer(Ethernet),Internetwork Layer(IP)之后,我们来到了TCP/IP协议簇的上半部分. Review:Magic ...

  7. 第五次程序设计作业 C++计算器雏形 调用文件输入输出

    一.C++计算器作业系列链接 第三次作业:C++计算器雏形 第三次作业附加:代码规范 第四次作业:命令行的调用及计算 MyGithub 二.本次作业相关 要求:第五次程序设计作业 根据这一次的作业要求 ...

  8. 【咖啡の设备】便携式冰滴壶——Dripo 使用体验

    --------------------------------------------2016.12.22 更新------------------------------------------- ...

  9. UVa 820 因特网带宽（最大流）

    https://vjudge.net/problem/UVA-820 题意: 给出所有计算机之间的路径和路径容量后求出两个给定结点之间的流通总容量. 思路: 裸的最大流问题.注意有个比较坑的地方,最后 ...

  10. [源][osg][osgBullet]osgBullet例子介绍

    1.BasicDemo 基本样例 一个小玩具飞机坠落,一个立方体盒子在转圈 2.centerofmass 质心 3.collision 碰撞检测 这里有一个大神自己改的例子: http://blog. ...