1.形如  http://localhost:8080/#/book?id=****

①路由配置

②路由定向链接,以query传参id

另外,获取query传递的参数id用  this.$route.query.id

2.形如  http://localhost:8080/#/book/****

①路由配置

②路由定向链接,以params传参id

// 当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用。
// 可以通过this.$route.params.id来取上动态的id
<router-link :to="{path: '/book/' + this.$route.params.id}" >
****
</router-link> // 还可以用命名路由的方式:
<router-link :to="{ name: 'book', params:{ id: this.$route.params.id }}" >
****
</router-link> // 还可以用router.push()的方式
router.push({name:'book', params: { id: this.$route.params.id}}) // 以上三种方式都可以实现跳转,都可以通过this.$route.params来取到参数

获取params传递的参数id用  this.$route.params.id

【vue】vue-router跳转路径url多种格式的更多相关文章

  1. 小程序navigator跳转路径url写法

    小程序navigator跳转路径url要写  要跳转的的页面文件夹相对于当前页面的页面文件夹的位置,即相对路径. 比如我当前页面跳转到同级目录下的另一个页面如下: <navigator url= ...

  2. vue中router跳转本页刷新

    问题:  导航栏的地址发生改变但是页面却不刷新  (用vue-router路由到当前页面,页面是不进行刷新的)解决: 1.);           2.location.reload()       ...

  3. $router 跳转

    vue用$router跳转有三种方法 this.$router.push.replace.go this.$router.push() 跳转到不同的url,但这个方法回向history栈添加一个记录, ...

  4. vue router 跳转到新的窗口方法

    在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面goEditor: function (index ...

  5. vue中$router以及$route的使用

    路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/hom ...

  6. Vue之路由跳转 传参 aixos 和cookie

    一.路由跳转 1.1 项目的初始化 vue create m-proj   >>>创建vue项目 精简vue项目的 views 视图   About(基本是删除的) Home.(可以 ...

  7. vue中router以及route的使用

    路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/hom ...

  8. vue之vue-router跳转

    vue之vue-router跳转 一.配置 在初始化使用vue-cli的时候会有vue-router的安装选择,选择安装即可. 二.嵌套路由 一般情况下,登录和项目页面属于同级,所以App.vue 只 ...

  9. vue路由-router

    VueRouter基础 vue路由的注册 导入 <script src="https://unpkg.com/vue-router/dist/vue-router.js"&g ...

随机推荐

  1. python 让挑选家具更方便

    原文链接:https://mp.weixin.qq.com/s/tQ6uGBrxSLfJR4kk_GKB1Q 家中想置办些家具,听朋友介绍说苏州蠡(li第二声)口的家具比较出名,因为工作在苏州,也去那 ...

  2. Eclipse For JavaSE安装、配置、测试

    Eclipse For JavaSE安装.配置.测试(win7_64bit) 目录 1.概述 2.本文用到的工具 3.安装与配置 4.JavaSE开发测试 5.ADT安装与Android开发测试 6. ...

  3. XRecyclerView上拉刷新下拉加载

    效果图: 首先要添加依赖: //xrecyclerviewimplementation 'com.jcodecraeer:xrecyclerview:1.3.2'//Gsonimplementatio ...

  4. Android使用Glide加载https链接的图片不显示的原因

    平时我们使用Glide加载http网址的图片的时候,图片可以正常加载出来,但是如果服务器端加上了安全认证,当加载自签名的https图片的时候就会报如下错误(证书路径验证异常). 我们如果不修改Glid ...

  5. Spring Boot 特性以及代码模板实例

    SpringBoot工程 参数解析 HTTP Method Request / Response / Session Error/重定向 Logger IoC AOP/Aspect   1:Sprin ...

  6. 2014年5月16至24日,杨学明老师为深圳创维RGB事业部提供两天的《软件测试管理》内训服务!

    2014年5月16日和24日,<在软件开发流程中构筑软件质量—软件测试管理>内训课程在深圳创维集团成功举办!来自创维研发.测试.生产等部门的管理人员和核心骨干等参加了此次培训,此次培训由研 ...

  7. python 正则表达式中反斜杠(\)的麻烦和陷阱

    这里是一点小心得:由于下面两个原因,在正则表达式中使用反斜杠就会产生了一个双重转换的问题. (1).python自身处理字符串时,反斜杠是用于转义字符 (2).正则表达式也使用反斜杠来转义字符     ...

  8. Java:Hibernate报错记录:Error executing DDL via JDBC Statement

    想着写一篇hibernate的博文,于是准备从头开始,从官网下了最新的稳定版本来做讲述. 结果利用hibernate自动建表的时候发生下面这个问题. 我很纳闷,之前用低版本一点的没有发生这个问题啊. ...

  9. 关于wordpress慢的问题

    随笔记载: 关于wordpress访问慢的原因,主要是wordpress采用了google前端库, 需替换wordpress/wp-includes/script-header.php中所有的goog ...

  10. web前端(4)—— 常用标签1

    标题标签h1~h6 顾名思义,这些就是把字体设置为大字体的,就如博客园的这个编辑器里的格式: 不信的话我们自己设置看看:好的,从本篇文章开始,我们需要动手了 <!DOCTYPE html> ...