【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 ...
随机推荐
- Salesforce 自定义标签在代码中的应用
自定义标签简介 Salesforce 中自定义标签(Custom Label)的作用是存储一般性的文本,可以用于 Apex.Visualforce 页面.Lightning 组件等地方,用于显示提示信 ...
- Spring学习之旅(六)Spring AOP工作原理初探
AOP(Aspect-Oriented Programming,面向切面编程)是Spring提供的关键技术之一. AOP基于IoC,是对OOP(Object-Oriented Programming ...
- Android IPC机制(四)用ContentProvider进行进程间通信
前言 ContentProvider为存储和获取数据提供统一的接口,它可以在不同的应用程序之间共享数据,本身就是适合进程间通信的.ContentProvider底层实现也是Binder,但是使用起来比 ...
- POST 400 的一次遭遇
使用Springboot开发接口的过程中,使用POST接收提交的数据. @PostMapping("/input") public void inputData(@RequestB ...
- a标签的使用
a标签可以用来跳转页面请求路径,也可以用来绑定事件. 在绑定事件的时候,我需要控制a标签,不让他进行跳转. 这时候我要做的就是限制他,不让他跳转. 只需要在href属性中加入javascript:vo ...
- Spring MVC 请求映射 (二)
完整的项目案例: springmvc.zip 目录 实例 项目结构: 一.配置web.xml <?xml version="1.0" encoding="UTF-8 ...
- JavaWeb 过滤器——验证登录 防止未登录进入界面
昨天刚刚完成老师布置的一个Web小项目,项目中用到了两个过滤器(编码过滤.登录过滤) 比如电商网页中有些不需要登录也能访问(首页.商品详细信息...),其他都需要过滤在会话作用域(session)中是 ...
- kmp算法python实现
kmp算法python实现 kmp算法 kmp算法用于字符串的模式匹配,也就是找到模式字符串在目标字符串的第一次出现的位置比如abababc那么bab在其位置1处,bc在其位置5处我们首先想到的最简单 ...
- 数组实例的 copyWithin()
用途:在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组.也就是说,使用这个方法,会修改数组本身. 用法:Array.prototype.copyWithin(targ ...
- beta版本合集
beta版本合集 [<p><span style="text-align: center; padding-bottom: 6px; background-color: # ...