编程式导航

注意:官方文档写错了    通过javascript跳转

//第一种跳转方式

// this.$router.push({ path: 'news' })

// this.$router.push({ path: '/content/495' });

//另一种跳转方式

// { path: '/news', component: News,name:'news' },  //给路由起个名字

// router.push({ name: 'news', params: { userId: 123 }})  //  带参数跳转

this.$router.push({ name: 'news'})

}

history模式

在实例化vue-router(路由)时设置mode:'history',//默认是hash模式,界面效果地址栏没有#

注意:history模式下要结合后端服务器配置,官网有详细介绍。

注:路由可以嵌套,做类似与上下导航里带有左右导航

Vue 路由的编程式导航与history模式的更多相关文章

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

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

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

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

  3. vue --》路由query 编程式导航传值与监听

    1.首先在一个页面设置一个按钮,用于路由跳转 <template> <div> <button @click="handleToRouter"> ...

  4. 11.vue-router编程式导航

    页面导航的两种方式 声明式导航:通过点击链接实现导航的方式,叫做声明式导航 例如:普通网页中的链接或vue中的 编程式导航:通过调用JavaScrip形式的API实现导航的方式,叫做编程式导航 例如: ...

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

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

  6. vue动态路由传值以及get传值及编程式导航

    1.动态路由传值 1.配置路由处 { path: '/content/:id', component: Content }, // 动态路由 2.对应页面传值 <router-link :to= ...

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

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

  8. vue编程式导航

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

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

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

随机推荐

  1. MySQL主从数据一致性问题修复

    MySQL主从数据一致性问题修复 前面,我们使用pt-table-checksum 可以检测出主从数据是否一致的问题.发现问题后,我们怎么解决这些问题,也是我们必须要会的技能. 修复主从数据一致性问题 ...

  2. WebGL编程指南理论分析之物体的运动和点光源

    之前的所有案例中物体都是静止的并且是平行光照射,这里我们来讨论一下运动物体和点光源. 一.运动物体 我们知道对于一个提供原始顶点坐标和原始顶点法向量数据的着色器绘制出来的图形看上去是这样的: 看上去很 ...

  3. SWIFT Scan QRCode

    SWIFT中扫描QRCode代码如下,照着敲一次再看下API的注释应该就没问题了. import UIKit import Foundation import AVFoundation class V ...

  4. linux下yum安装jdk1.8(rpm包)和tomcat-8.5

    Java是目前可移植性较高的语言,相当火热,tomcat运行就需要Java语言环境 ========= 完美的分割线 ========= 0.java简介 1)tomcat运行需要对应的Java环境, ...

  5. Oracle text组件安装

    1.目标:在数据库中,安装Oracle Text组件: 970473.1 MOS文档ID     2.组件相关视图:查询验证 #查询DB中的组件: #视图:USER_REGISTRY (注册) COM ...

  6. ElasticSearch(七):ElasticSearch集群的搭建

    由于资源有限,使用是一台机器上安装三个elasticSearch服务端组成的集群. 1. 安装elasticSearch6.3.2 将原本安装的elasticSearch6.3.2复制两份,分别重新命 ...

  7. 《DSP using MATLAB》Problem 3.17

    用差分方程两边进行z变换,再变量带换得到频率响应函数(或转移函数,即LTI系统脉冲响应的DTFT). 代码: %% ------------------------------------------ ...

  8. 剑指offer-顺时针打印矩阵-二维数组

    输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵: 1     2  3    4 5     6  7    8 9   10 11 12 13 14 15 16 ...

  9. Hive2:Unable to instantiate org.apache.hadoop.hive.ql.metadata.SessionHiveMetaStoreClient

    [root@node1 ~]# hive which: no hbase in (/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bi ...

  10. MVC5 + EF6 + Bootstrap3系列教程

    本系列教程以ASP.NET MVC5为核心框架,使用Entity Framewok6访问数据,并使用Bootstrap3作为前端UI框架.帮助大家开发出一套高效.美观.稳定.实用的软件系统. MVC5 ...