【vue】vue-router跳转路径url多种格式
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多种格式的更多相关文章
- 小程序navigator跳转路径url写法
小程序navigator跳转路径url要写 要跳转的的页面文件夹相对于当前页面的页面文件夹的位置,即相对路径. 比如我当前页面跳转到同级目录下的另一个页面如下: <navigator url= ...
- vue中router跳转本页刷新
问题: 导航栏的地址发生改变但是页面却不刷新 (用vue-router路由到当前页面,页面是不进行刷新的)解决: 1.); 2.location.reload() ...
- $router 跳转
vue用$router跳转有三种方法 this.$router.push.replace.go this.$router.push() 跳转到不同的url,但这个方法回向history栈添加一个记录, ...
- vue router 跳转到新的窗口方法
在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面goEditor: function (index ...
- vue中$router以及$route的使用
路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/hom ...
- Vue之路由跳转 传参 aixos 和cookie
一.路由跳转 1.1 项目的初始化 vue create m-proj >>>创建vue项目 精简vue项目的 views 视图 About(基本是删除的) Home.(可以 ...
- vue中router以及route的使用
路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/hom ...
- vue之vue-router跳转
vue之vue-router跳转 一.配置 在初始化使用vue-cli的时候会有vue-router的安装选择,选择安装即可. 二.嵌套路由 一般情况下,登录和项目页面属于同级,所以App.vue 只 ...
- vue路由-router
VueRouter基础 vue路由的注册 导入 <script src="https://unpkg.com/vue-router/dist/vue-router.js"&g ...
随机推荐
- Android沉浸式状态栏的简单实现
随着卡片式设计在Android系统的上越来越流行,比如现在早已经烂大街的沉浸式状态栏,几乎所有的主流的APP都支持沉浸式状态栏,如QQ.UC浏览器等等.所以觉得有必要学习一下,找了点资料,总结了一下, ...
- 基于OpenSSL的HTTPS通信C++实现
HTTPS是以安全为目标的HTTP通道,简单讲是HTTP的安全版.即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL.Nebula是一个为开发者提供一个快速开发 ...
- 最近因为突然喜欢这方面的ui设计,所以搜刮了很多我试过可用性强的界面,又可爱又实用···分享给大家咯
最近因为突然喜欢这方面的ui设计,所以搜刮了很多我试过可用性强的界面,又可爱又实用···分享给大家咯 1.Side-Menu.Android 分类侧滑菜单,Yalantis 出品. 项目地址:http ...
- CSS margin 外边距 属性的位置关系
padding:内边距 margin :外边距 margin:10px; 所有 4 个外边距都是 10px ******************************************* ma ...
- SQL Server死锁的解决过程
某现场报一个SQL死锁,于是开启了1222跟踪: dbcc traceon(1222,-1) 一段时间之后拷贝ERROR文件查找相关信息,比较有用的摘录出来如下: 语句一: select study_ ...
- NLog简单使用
一.安装 二.安装后会在根目录出现NLog.config配置文件,简单修改配置文件为写入文件记录日志: <?xml version="1.0" encoding=" ...
- mysql Client does not support authentication protocol requested by server; consider upgrading MySQL
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '123456';
- Jenkins2.32打包Unity项目的记录
前言 使用jenkins来打包unity3d的工程. jenkins :2.50 /2.32.3(长期支持版 建议使用此版本) 操作系统:windows 7 x64 sp1 (打包安卓和win) ,m ...
- js中实现隐藏部分姓名或者电话号码
项目需要, 只显示用户的姓名和手机号开头跟结尾, 其他部分用 * 代替, 借鉴了网上的代码, 参考地址没来得及记下 hidden:function(str,frontLen,endLen) { var ...
- voinc+vue实现级联选择
需求: vonic中实现级联选择 <!DOCTYPE html> <html> <head> <title>下拉框</title> < ...