<!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-link to="/content">链接</router-link>

    <router-view></router-view>

</div>

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

    <div>

        id:{{id}}

    </div>

</script>

<script>

    const content = {

        template: "#content",

        data() {

            return {

                id:0

            }

        },

        mounted() {

            this.id = this.$route.params.id;

            if (!this.id) {

                this.id = 1;

            }

        }

    }

    let routes=[

        {path:'/content/:id?',component:content}

    ]

    let router=new VueRouter({routes});

    new Vue({

        el:"#demo",

        router

    });

</script>

</body>

</html>

　　

057——VUE中vue-router之路由参数默认值的设置的更多相关文章

  1. es6（三）：es6中函数的扩展（参数默认值、rest参数、箭头函数）

    1.函数可以设置参数默认值 function test1(x,y=1){ console.log(x,y) } test1(10)//10 1 2.rest参数:形式为...变量名 function ...

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

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

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

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

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

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

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

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

  6. Vue中使用children实现路由的嵌套

    Vue中使用children实现路由的嵌套 相关Html: <!DOCTYPE html> <html lang="en"> <head> &l ...

  7. Vue组件库新增的prop属性类型是Object或者Array时默认值的设置

    在Vue开发中提供组件库时常常需要添加相关属性,用来接收父组件向子组件传递的数据,通常也会给属性设置默认值,那么当属性的类型是Object或者Array类型时如何设置默认值比较合理呢?下面将揭晓这一过 ...

  8. [ES6系列-03]ES6中关于参数相关特性详解（参数默认值与参数解构赋值与剩余参数）

    [原创] 码路工人 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 今天总结一下 ES6 中跟参数相关的内容. 欢迎补充斧正.留言交流. 让我们互相学习一起进步. 1. ES6 参数默认值( ...

  9. Ruby方法参数默认值的一个小技巧在Rails中的应用

    我们需要生成一个gravatar格式的html.image标示,于是写了如下方法: def gravatar_for(user) gravatar_id = Digest::MD5::hexdiges ...

随机推荐

  1. Rain on your Parade---hdu2389（HK求最大匹配）

    题目链接 题意:有n个客人,m把雨伞,在t秒之后将会下雨,给出每个客人的坐标和每秒行走的距离,以及雨伞的位置,问t秒后最多有几个客人可以拿到雨伞? 就是求最大匹配的  Hopcroft-Karp复杂度 ...

  2. 洛谷P4428二进制 [BJOI2018] 线段树

    正解:线段树 解题报告: 传送门! 话说开始看到这题的时候我想得hin简单 因为关于%3有个性质就是说一个数的各个位数之和%3=这个数%3嘛,小学基础知识? 我就想着,就直接建一棵树,只是这棵树要用个 ...

  3. 傅里叶变换 VS 拉普拉斯变换

    拉普拉斯变换的公式 傅里叶变换公式 拉普拉斯变换是将时域映射到s plane上,而傅里叶变换实际是将时域 映射在s-plane的虚轴上, 傅里叶变换可以看作拉普拉斯变换  的一种特例 1.推导傅里叶变 ...

  4. Notepad++插件安装和使用和打开大文件

    版权声明:本文为博主皮皮http://blog.csdn.net/pipisorry原创文章,未经博主同意不得转载. https://blog.csdn.net/pipisorry/article/d ...

  5. Java-idea-PMD源文件级别潜在bug查看

    一.概述 PMD(Project Manager Design)是一种开源分析Java代码错误的工具.与其他分析工具不同的是,PMD通过静态分析获知代码错误.也就是说,在不运行Java程序的情况下报告 ...

  6. Red Hat Linux相关产品iso镜像下载

    Linux系统各发行版镜像下载(持续更新) http://www.linuxfly.org/post/659/ http://www.linuxidc.com/Linux/2007-09/7399.h ...

  7. Django小项目web聊天

    WEBQQ的实现的几种方式 1.HTTP协议特点 首先这里要知道HTTP协议的特点:短链接.无状态! 在不考虑本地缓存的情况举例来说:咱们在连接博客园的时候,当tcp连接后,我会把我自己的http头发 ...

  8. mariadb10.1.13GTID实现主从复制

    ---恢复内容开始--- 环境:centos6.5       mariadb:10.1.13-MariaDB GTID:GTID是有服务器的UUID和事务序号组成的唯一事务序号 ---UUID:N ...

  9. Java基础教程：注解

    Java基础教程:注解 本篇文章参考的相关资料链接: 维基百科:https://zh.wikipedia.org/wiki/Java%E6%B3%A8%E8%A7%A3 注解基础与高级应用:http: ...

  10. CCPC-Wannafly Winter Camp Day2 (Div2, onsite)

    Class $A_i = a \cdot i \% n$ 有 $A_i = k \cdot gcd(a, n)$ 证明: $A_0 = 0, A_x = x \cdot a - y \cdot n$ ...