<!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. Expedition---poj2431(优先队列-堆的实现)

    题目链接:http://poj.org/problem?id=2431 题意:一辆卡车需要行驶 L 距离,车上油的含量为 P,在行驶的过程中有 n 个加油站 每个加油站到终点的距离是ai,每个加油站最 ...

  2. Python开发【数据结构】:算法(一)

    算法基础 1.什么是算法? 算法(Algorithm):一个计算过程,解决问题的方法 2.复习:递归 递归的两个特点: 调用自身 结束条件 两个重要递归函数的对比: # 由大到小 def func3( ...

  3. mysql 数据操作 单表查询 group by group_concat() 函数

    # group_concat() 和concat() 一样拼接字符串 用在分组里 需求:查看每个职位都有哪些员工名字 把所有员工成员的名字都列出来 把每个职位里的员工姓名列出来 mysql> s ...

  4. IOS #ifdef 的那些事儿

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u012884714/article/details/25188685 格式有点乱,整了几次都整只是来 ...

  5. java-基础-【四】实际编程中的对象

    一.概述 实际编程开发中,仅仅一个数据库对象映射是满足不了各种复杂需求. O/R Mapping 是 Object Relational Mapping(对象关系映射)的缩写.通俗点讲,就是将对象与关 ...

  6. 在jQuery中解决事件冒泡问题

    <pre name="code" class="html">事件会按照DOM层次结构像水泡一样不断向上直至顶端 解决方法:在事件处理函数中返回fal ...

  7. docker——Etcd高可用键值对数据库

    一.简介 Etcd按照官方介绍: Etcd is a distributed, consistent key-value store for shared configuration and serv ...

  8. postgresql主从复制

    本文章以rpm包方式安装,版本为9.3.4 一.postgresql安装 postgresql93-9.3.4-1PGDG.rhel6.x86_64.rpm postgresql93-libs-9.3 ...

  9. Java 和 Python 解析动态 key 的 JSON 数据

    一.概述 解析JSON过程中,什么情况都可能遇到.遇到特殊的情况,不会怎么办?肯定不是设计的问题,一定是你的姿势不对. 有这样一种JSON需要解析: { "b3444533f6544&quo ...

  10. uva11090 Bellman-Ford 运用

    给定一一个n个点m条边的加权有向图, 平均值最小的回路. 二分答案,对于每个二分的mid 做一次Bellman-Fprd , 假设有k条边组成的回路. 回路上各条边的权值为  w1 , w2 ..wk ...