11.vue-router编程式导航
页面导航的两种方式
- 声明式导航:通过点击链接实现导航的方式,叫做声明式导航
例如:普通网页中的链接或vue中的 - 编程式导航:通过调用JavaScrip形式的API实现导航的方式,叫做编程式导航
例如:普通网页中的location.href
1.编程式导航基本用法
常用的编程式导航API如下:
- this.$router.push ('hash地址')
- this.$router.go (n)
const User = {
template: '<div><button @click= "goRegister ">跳转到注册页面< /button></div>',
methods: {
goRegister: function() [
//用编程的方式控制路由跳转
this.$router.push('/register');
}
}
}
2.编程式导航参数规则
router.push()方法的参数规则
//字符串(路径名称)
router.push('/home')
//对象
router.push({ path: ' /home' })
//命名的路由(传递参数)
router.push({ name: '/user', params: { userId: 123 }})
//带查询参数,变成/register?uname=lisi
router.push({ path: '/register', query: { uname: 'lisi' }}}
11.vue-router编程式导航的更多相关文章
- vue路由-编程式导航
除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location, onComp ...
- Vue路由编程式导航以及hash模式
import Vue from 'vue'; import App from './App.vue'; //引入公共的scss 注意:创建项目的时候必须用scss import './assets/c ...
- VueRouter爬坑第四篇-命名路由、编程式导航
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦
一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...
- vue编程式导航
vue项目中使用到了组件间传值,通过路由跳转实现从产品页进入产品详情页查看功能. 使用了this.$router.push(编程式导航) product页面中:因为只需要遮住产品列表页来显示产品详情页 ...
- [vue]声明式导航和编程式导航
声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切换 区别: 写法不一样,声明式导航是写在组件的template中,通过router-link来触发,编程式导航写在js函数中, ...
- Vue 路由的编程式导航与history模式
编程式导航 注意:官方文档写错了 通过javascript跳转 //第一种跳转方式 // this.$router.push({ path: 'news' }) // this.$router.pus ...
- vue中声明式导航和编程式导航
官方文档:https://router.vuejs.org/zh-cn/essentials/navigation.html 声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切 ...
- vue编程式导航,命名路由
//使用 window.location.href 的形式,叫做 编程式导航 绑定事件的形式 <template> <div class="goods-item" ...
随机推荐
- 对于之前已经push的项目增加.gitignore配置文件不起作用的处理
.gitignore只能忽略那些原来没有被track的文件,如果某些文件已经被纳入了版本管理中,则修改.gitignore是无效的. 解决方法就是先把本地缓存删除(改变成未track状态),然后再提交 ...
- spark 性能优化简要总结
1.从同一个数据源尽量只创建一个rdd,后续业务逻辑复用该rdd2.如果要对某个rdd进行多次的transformation或action操作,应当持久化该rdd3.从数据源读取到rdd后,要尽早的进 ...
- csu 1978: LXX的图论题
1978: LXX的图论题 Submit Page Summary Time Limit: 1 Sec Memory Limit: 128 Mb Submitted: 71 ...
- activiti学习3:流程引擎对象和流程引擎配置对象
目录 activiti学习3:流程引擎对象和流程引擎配置对象 一.activiti的简单使用流程 二.流程引擎配置对象ProcessEngineConfiguration的介绍 三.activiti配 ...
- sizeof运算符和strlen()函数
首先放上代码和运行结果.(在VC6.0上运行) #include<stdio.h> #include<string.h> int main(void) { char s1[]= ...
- python递归函数和河内塔问题
关于递归函数: 函数内部调用自身的函数. 以n阶乘为例: f(n) = n ! = 1 x 2 x 3 x 4 x...x(n-1)x(n) = n x (n-1) ! def factorial(n ...
- vue+element项目中 给input赋值之后无法修改
点击修改按钮 将值赋值给 input 但是无法修改,input不可编辑,部分input可以编辑 , 解决方法一. 改变data数据初始值 解决方法二. 用this.$set input:{ descr ...
- 【爬坑笔记】c# 如何通过EF Core读写sql server的类似double型字段
=============================================== 2019/8/31_第1次修改 ccb_warlock == ...
- Linux RedHat 7 配置本地 YUM源
尽管RPM安装方法能够帮助用户查询软件相关的依赖关系,但是还是需要安装人员自己来解决,而且有些大型软件可能与数十个程序都有依赖关系,在这种情况下安装软件事件非常痛苦和耗费事件的事情,而Yum软件仓库可 ...
- 用C#实现Rabbitmq应用的小实例
RabbitMQ是实现了高级消息队列协议(AMQP)的开源消息代理软件(亦称面向消息的中间件).RabbitMQ服务器是用Erlang语言编写的,而集群和故障转移是构建在开放电信平台框架上的.所有主要 ...