<!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. Kubernetes实战(二)：k8s v1.11.1 prometheus traefik组件安装及集群测试

    1.traefik traefik:HTTP层路由,官网:http://traefik.cn/,文档:https://docs.traefik.io/user-guide/kubernetes/ 功能 ...

  2. uchome四大常用入口文件

    一.四大常用入口文件 cp.php           编辑日志.相册.活动等等相关编辑操作基本上都从这个文件入口 do.php          登录.注册.找回密码.相册批量上传.在需要密码的情况 ...

  3. 【接口测试】接口概念及Json相关

    一.接口相关概念 1.什么是接口? 接口:接口就是系统A程序中留的其他系统B访问系统A的接口(实际上是系统某个代码文件下某一个可访问的方法.).其他系统B可以调用这个方法a对系统A中的方法a进行访问从 ...

  4. 第1章 1.3计算机网络概述--规划IP地址介绍MAC地址

    IP地址的作用是:指定发送数据者和接收数据者. MAC地址的作用:指定数据包的下一跳转设备.就是说明数据下一步向谁发. 路由器的作用:在不同的网段中转发数据.路由器本质就是有2个网卡的设备. 网卡:用 ...

  5. python基础之员工信息表作业

    周末大礼包 文件存储格式如下: id, name, age, phone, job 1, Alex, 22, 13651054608, IT 2, Egon, 23, 13304320533, Tea ...

  6. ppt 文字按笔画进入。

    1:在word里面写一个字(艺术字或非艺术字都可),字体格式设置为  楷体_gb23212, 没有则下载安装,http://www.cnblogs.com/liyafei/p/8747992.html ...

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

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

  8. （转）JSON Web Token - 在Web应用间安全地传递信息

    JSON Web Token(JWT)是一个非常轻巧的规范.这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息. 让我们来假想一下一个场景.在A用户关注了B用户的时候,系统发邮件给B用户, ...

  9. Mybatis怎么在mapper中用多个参数

    原文地址:https://github.com/mybatis/mybatis-3/wiki/FAQ How do I use multiple parameters in a mapper? Jav ...

  10. 工作记录之开发HRM项目总结

    开发HRM项目的步骤: 1:首先保留HRM项目中的两张表(Employee,Position)把这两张表中的数据内容复制到Operator-Portlet这个项目中,这两张表的service.xml配 ...