页面导航的两种方式

  • 声明式导航:通过点击链接实现导航的方式,叫做声明式导航

    例如:普通网页中的链接或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编程式导航的更多相关文章

  1. vue路由-编程式导航

    除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location, onComp ...

  2. Vue路由编程式导航以及hash模式

    import Vue from 'vue'; import App from './App.vue'; //引入公共的scss 注意:创建项目的时候必须用scss import './assets/c ...

  3. VueRouter爬坑第四篇-命名路由、编程式导航

    VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...

  4. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  5. vue编程式导航

    vue项目中使用到了组件间传值,通过路由跳转实现从产品页进入产品详情页查看功能. 使用了this.$router.push(编程式导航) product页面中:因为只需要遮住产品列表页来显示产品详情页 ...

  6. [vue]声明式导航和编程式导航

    声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切换 区别: 写法不一样,声明式导航是写在组件的template中,通过router-link来触发,编程式导航写在js函数中, ...

  7. Vue 路由的编程式导航与history模式

    编程式导航 注意:官方文档写错了 通过javascript跳转 //第一种跳转方式 // this.$router.push({ path: 'news' }) // this.$router.pus ...

  8. vue中声明式导航和编程式导航

    官方文档:https://router.vuejs.org/zh-cn/essentials/navigation.html 声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切 ...

  9. vue编程式导航,命名路由

    //使用 window.location.href 的形式,叫做 编程式导航 绑定事件的形式 <template> <div class="goods-item" ...

随机推荐

  1. 对于之前已经push的项目增加.gitignore配置文件不起作用的处理

    .gitignore只能忽略那些原来没有被track的文件,如果某些文件已经被纳入了版本管理中,则修改.gitignore是无效的. 解决方法就是先把本地缓存删除(改变成未track状态),然后再提交 ...

  2. spark 性能优化简要总结

    1.从同一个数据源尽量只创建一个rdd,后续业务逻辑复用该rdd2.如果要对某个rdd进行多次的transformation或action操作,应当持久化该rdd3.从数据源读取到rdd后,要尽早的进 ...

  3. csu 1978: LXX的图论题

    1978: LXX的图论题 Submit Page   Summary   Time Limit: 1 Sec     Memory Limit: 128 Mb     Submitted: 71   ...

  4. activiti学习3:流程引擎对象和流程引擎配置对象

    目录 activiti学习3:流程引擎对象和流程引擎配置对象 一.activiti的简单使用流程 二.流程引擎配置对象ProcessEngineConfiguration的介绍 三.activiti配 ...

  5. sizeof运算符和strlen()函数

    首先放上代码和运行结果.(在VC6.0上运行) #include<stdio.h> #include<string.h> int main(void) { char s1[]= ...

  6. 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 ...

  7. vue+element项目中 给input赋值之后无法修改

    点击修改按钮 将值赋值给 input 但是无法修改,input不可编辑,部分input可以编辑 , 解决方法一. 改变data数据初始值 解决方法二. 用this.$set input:{ descr ...

  8. 【爬坑笔记】c# 如何通过EF Core读写sql server的类似double型字段

    =============================================== 2019/8/31_第1次修改                       ccb_warlock == ...

  9. Linux RedHat 7 配置本地 YUM源

    尽管RPM安装方法能够帮助用户查询软件相关的依赖关系,但是还是需要安装人员自己来解决,而且有些大型软件可能与数十个程序都有依赖关系,在这种情况下安装软件事件非常痛苦和耗费事件的事情,而Yum软件仓库可 ...

  10. 用C#实现Rabbitmq应用的小实例

    RabbitMQ是实现了高级消息队列协议(AMQP)的开源消息代理软件(亦称面向消息的中间件).RabbitMQ服务器是用Erlang语言编写的,而集群和故障转移是构建在开放电信平台框架上的.所有主要 ...