<!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. nginx ---refine---按需时间/流量进行调整后台服务器---geocity,proxypass

    原理相当于配置文件在启动时进行编译,proxyPass http://mydomain/path/xxxx这种方式是编译成静态的,直接替换成它解析到的ip/vip,只有重新启动时才会重新解析. 而 s ...

  2. jquery 获取对象

    jquery 获取对象 1.引用this作为对象时,必须以$(this)的形式变为对象目标,否则,无法识别,会报错“ has no method”

  3. day15（Mysql学习）

      day15-MySQL   数据库   1 数据库概念(了解) 1.1 什么是数据库 数据库就是用来存储和管理数据的仓库! 数据库存储数据的优先: 可存储大量数据: 方便检索: 保持数据的一致性. ...

  4. Mybatis三剑客之mybatis-plugin

    搜索mybatis plugin并安装. 如果没有的话,就按照如下: 1. 简介     mybatis plugin作为一款优秀的mybatis跳转插件,比起free mybatis plugin插 ...

  5. POJ1061:青蛙的约会+POJ2115C Looooops+UVA10673Play with Floor and Ceil（扩展欧几里得）

    http://poj.org/problem?id=1061 第一遍的写法: #include <iostream> #include <stdio.h> #include & ...

  6. 站点默认访问https

    需求简介 现在网站都是https访问了,再用http会显得很low,所以我要把网站设置为默认的https访问. 1nginx的rewrite方法 这应该是大家最容易想到的方法,将所有的http请求通过 ...

  7. Parallel Decision Tree

    Decision Tree such as C4.5 is easy to parallel. Following is an example. This is a non-parallel vers ...

  8. 编程当道，学点Python技术好傍身

    为了填满AI时代的人才缺口,编程语言教育都从娃娃抓起了!如果你还不懂Python是什么将来怎么给孩子辅导作业呢? Python新手入门教程 近期,浙江省信息技术课程改革方案出台,Python言语现已断 ...

  9. Linux常用命令实践

    一.开机自动挂载文件系统设置 在/media下新建RHEL目录,并把/dev/sr1第二块光驱挂载到该目录 #mkdir /media/RHEL #mount /dev/sr1 /media/RHEL ...

  10. jQuery中的prop和attr区别

    最近在做一个项目用jq时发现一个问题  在谷歌中可以正常出效果  但是在火狐中就是不行 就是这个prop和attr   之前用的是attr方法   但是在火狐中不出效果  于是特意看了两者的区别 主要 ...