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

    <br/>

    <router-view></router-view>

</div>

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

    <div>

        cid:{{$route.params.cid}}----id:{{$route.params.id}}

        <br/>

        <button @click="show">点击按钮</button>

    </div>

</script>

<script>

    const content = {

        template: "#content",

        methods: {

            show() {

                console.log(this.$route.params);

            }

        }

    }

    let routes = [

        {path: '/content/:cid/show/:id', component: content}

    ]

    let router = new VueRouter({routes});

    new Vue({

        el: "#demo",

        router

    });

</script>

</body>

</html>

　　地址：http://localhost/vueTest/055.html#/content/11/show/22

055——VUE中vue-router之路由参数的随意设置与伪静态链接地址处理：的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  7. 【Vue中的坑】路由相同参数不同无法触发路由

    场景: vue实现导航栏,二级导航栏跳转到相同页面,通过参数来实现到该页面后,根据参数来滚动到对应到位置 网上的解决方法: 通常情况下我们喜欢设置keepAlive 包裹 router-view &l ...

  8. vue +ts 在router的路由中import报错的解决方案

    在router.ts中引入.vue文件,会提示打不到module,但是编译可能成功,运行也不报错 找了好久,发现了这个答案 https://segmentfault.com/a/11900000167 ...

  9. 064——VUE中vue-router之使用路由别名定制(alias)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. talib 中文文档（三）：talib 方法大全

    Function API Examples Similar to TA-Lib, the function interface provides a lightweight wrapper of th ...

  2. SNMP 原理及配置简述 net-snmp-utils net-snmp 第2版基于SNMP 群体名（community name） 第3版引入了安全性更高的访问控制方法 SNMP协议操作只有4种 Apache的php_snmp 模块

    SNMP 原理及配置简述  net-snmp-utils  net-snmp 第2版基于SNMP 群体名(community name) 第3版引入了安全性更高的访问控制方法 SNMP协议操作只有4种 ...

  3. centos单用户 救援 运行级别 yum,单用户模式,救援模式,inittab ：启动级别 e2fsck wetty mingetty 物理终端 /dev/console 虚拟终端 /dev/tty(0,6) 模拟终端 /dev/pts/# grub-md5-crypt 给grub加密码 initrd 第二节课

    centos单用户 救援 运行级别  yum,单用户模式,救援模式,inittab :启动级别  e2fsck  wetty  mingetty  物理终端 /dev/console  虚拟终端 /d ...

  4. SQL Server简洁查询正在运行SQL（等待事件）

    通常我们可以使用 sp_who2 我们希望更加简洁的信息,下面这个查询使用系统表sys.sysprocesses,以及sys.dm_exec_sql_text做OUTER APPLY. T-SQL是这 ...

  5. PHP接收json格式的POST数据

    /** * 获取 post 参数; 在 content_type 为 application/json 时,自动解析 json * @return array */ private function ...

  6. Cocos2d-JS实现的打飞机

    一.前言 今天我们来讲一个最最最常见的一个小游戏--打飞机!是的,打飞机!还记得小时候在玩儿的雷电,应该是打飞机最早的样子了吧.直到现在,也有微信打飞机,全民飞机大战,全民打飞机等游戏的出现,这些游戏 ...

  7. cocos进阶教程(5)回调函数和定时器的使用技巧

    cc.CallFunc.create(selector, data) selector:函数名(函数指针) data:参数 table类型 函数写法 function(node,args ) node ...

  8. 002-字段不为null

    1.尽量不要在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引而进行全表扫描,强烈建议where涉及的列,不要留空,创建表时赋予初始值. 比如 select id from ...

  9. Learn2Rank

    Learning to rank 排序学习是推荐.搜索.广告的核心方法.排序结果的好坏很大程度影响用户体验.广告收入等.排序学习可以理解为机器学习中用户排序的方法,这里首先推荐一本微软亚洲研究院刘铁岩 ...

  10. windows下通过ping和tracert工具来测试网站访问速度

    一.环境 OS: windows 二.步骤 2.1.ping mirrors.163.com Pinging mirrors.163.com [23.111.1.151] with 32 bytes ...