<!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. docker 离线环境安装oracle

    因测试需要,需在内网的测试环境搭建一套docker Oracle 11g环境进行测试,测试环境为redhat 6.6 安装docker 1.7,本机windows 7 环境,安装docker 17.1 ...

  2. 204-React DOM 元素

    一.概述 为了提高性能和跨浏览器兼容性,React实现了一个独立于浏览器的DOM系统. 在React中,所有DOM属性和属性(包括事件处理程序)都应该是camelCased的.例如,HTML属性tab ...

  3. 8.python中双冒号(::)的用法

    s[i:j:k]是,根据该“片第从i到j与第k步”.何时i和j缺席,整个序列是和s[::k]意思是“每k个项目”. 示例 首先,让我们来初始化一个列表: >>> s = range( ...

  4. golang 复制对象的正确做法

    需求 实际运用种,传参是一对象指针,现在如何最简便地复制一对象? 实现 坑:&*  先拿到值再指针? package main import ( "time" " ...

  5. [css]单/多行居中&字体设置

    行高和字号 行高 CSS中,所有的行,都有行高.盒模型的padding,绝对不是直接作用在文字上的,而是作用在"行"上的. line-height: 40px; 文字,是在自己的行 ...

  6. （转）利用Spring AOP自定义注解解决日志和签名校验

    一.需解决的问题 部分API有签名参数(signature),Passport首先对签名进行校验,校验通过才会执行实现方法. 第一种实现方式(Origin):在需要签名校验的接口里写校验的代码,例如: ...

  7. 排序问题Java

    package zhuzhuangtu; import java.util.*; import java.io.*; public class Main{ public static void mai ...

  8. SpringMVC—概述

    mvc容器的实例化: http://blog.csdn.net/lin_shi_cheng/article/details/50686876 Spring的启动过程: 1: 对于一个web应用,其部署 ...

  9. 没的选择时，存在就是合理的::与李旭科书法字QQ聊天记录

    2015,8,11,晚上,与李旭科书法字作者,在Q上聊了下 有些资料 涉及到字库设计.字库产业,对大家也有益处 按惯例 没细整理,直接发blog了 ps,9.11 靠,今天是911,早上查资料,在 f ...

  10. JS在if中的强制类型转换

    JS在if中的强制类型转换 众所周知,JS在很多情况下会进行强制类型转换,其中,最常见两种是: 1.使用非严格相等进行比较,对==左边的值进行类型转换 2.在if判断时,括号内的值进行类型转换,转化为 ...