Vue路由实现页面跳转的两种方式(router-link和JS)基础知识入门_路由菜鸟教程网

Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用1、通过 实现 组件用于设置一个导航链接,切换不同 HTML 内容使用方法:简单写法demo2使用 v-bind 的写法<router-lin

Vue路由实现页面跳转的两种方式(router-link和JS)基础知识入门

Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用

Vue路由实现页面跳转的两种方式(router-link和JS)基础知识入门_路由菜鸟教程网

1、通过 <router-link> 实现

<router-link> 组件用于设置一个导航链接,切换不同 HTML 内容

使用方法:

简单写法

<router-link to="demo2">demo2</router-link>

使用 v-bind 的写法

<router-link :to="‘demo2‘">demo2</router-link>

<!-- 也可以用{}包裹对应的path或name -->
<router-link :to="{ name: ‘demo2‘ }">demo2</router-link>

传参的写法

<router-link :to="{ name: ‘demo2‘, params: { userId: 123 }}">demo2</router-link>

这里传参需要在 router.js 中对 demo2 的路径进行配置,在 path 中 demo2 后添加通配符 : 和对应的 userId,如下:

{
  path: ‘/demo2/:userId‘,
  name: ‘demo2‘,
  component: demo2
},

配置完成后,页面跳转的结果就为 /demo2/123

这里的“123”就是上面的 userId

那么,如何在新页面中获取到传过来的参数 userId 呢?

在 mounted 钩子中使用 this.$route.params.xx. 获取传过来的参数,如下:

mounted () {
    alert(this.$route.params.userId)
}

// 弹出123

传入地址键值对

<router-link :to="{ path: ‘demo2‘, query: { plan: ‘private‘ }}">demo2</router-link>

页面跳转的结果为 /demo2?plan=private

(注意这里不用在 router.js 里配置路径)

在新页面中获取到传过来的地址键值对 plan,可以在 mounted 钩子中使用 this.$route.plan.xx. 获取传过来的地址键值对,如下:

mounted () {
  alert(this.$route.query.plan)
}

// 弹出private

2、通过 JS 实现

template 部分:

<button @click="toURL">跳转页面</button>

script 部分:

(注意这里是 router,上面是 route)

简单写法

methods:{
  toURL(){
    this.$router.push({ path: ‘/demo2‘ })
  }
}

传参的写法

methods:{
  toURL(){
    this.$router.push({ name: ‘demo2‘, params: { userId: 123 }})
  }
}

传入地址键值对

methods:{
  toURL(){
    this.$router.push({ name: ‘demo2‘, params: { userId: 123 }, query: { plan: ‘private‘ } })
  }
}

海计划公众号
(0)
上一篇 2020/03/26 23:34
下一篇 2020/03/26 23:34

您可能感兴趣的内容

  • jquery绑定点击事件动画BUG攻略教程_bug零基础入门

    jq中的animate()方法所实现的动画在绑定事件的同时会产生各种类型的BUG,在事件选择的时候我会尽可能的使用mouseenter和mouseleave来避免mouseover和mouseout所产生的事件冒泡。如果单独使用个animate的话,在快速移入移出的时候,会重复触发事件,而产生队列没有被清除,重复执行的bug,这个时候可以使用stop()来

    2020/03/24
  • 为什么我会选择React基础知识Next.js,而不是Vue或Angular?基础教程_react

    本文的目的不是要对 React、Vue 和 Angular 三者进行比较,已经有许多人对这个话题进行了比较深入的探讨。每个人都有自己的偏好。与其他库和框架相比,我更喜欢使用 React 构建用户界面。在我解释了为什么之后,也许你也会切换到 React,如果你现在还没有用它的话。几个月前,我正在寻找一个用于 React 的样板文件生成器或是初学者工具包。我向往

    2020/04/03
  • IT商业新闻网菜鸟知识_解读信息时代的商业变革

    IT商业新闻网菜鸟知识 官方网址:http://itxinwen.com/ 简介描述:解读信息时代的商业变革 it商业新闻网(www.itxinwen.com),24小时滚动报道互…

    2020/03/06
  • webpack优化分享指南攻略_优化零基础入门

    Webpack整个的构建过程是基于事件流Webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。 插件就像是一个插入到生产线中的一个功能,在特定的时机对生产线上的资源做处理。 Webpack 通过 Tapable 来

    2020/03/24
  • javascript有list类型吗?基础教程_类型小白指南

    JavaScript中是不原生支持List类型的,所以大家在想要使用的时候,都会去自己封装一个类,然后去实现它。这个方法实现满足了基本的API,而且是在JS Array类型的基础上扩展的,也可以在它上面使用Array的方法,另外一大 亮点 是可以直接引用length属性获得集合的元素个数。代码实现//兼容IE8-,为Array原型添加indexOf方法;
    i

    2020/03/20
  • 30-seconds-of-code入门攻略_30 秒就能理解的 JavaScript 代码片段

    30-seconds-of-code入门攻略 官方网址:https://30secondsofcode.org/ GitHub:https://github.com/30-seco…

    2020/03/06
  • 那些看似光鲜亮丽的工作背后都有着不为人知的坑 基础教程_工作基础教程

    很多人在找工作的时候都追求单位名称听上去高大上,工作内容看上去华丽丽,可殊不知每一份光鲜亮丽的工作背后也许都有着不为外人所知的“坑”。01小A,从分公司调到总公司工作,好不容易从曾经所谓的乙方熬到了令人艳羡的甲方,却没想到所有的甲方乙方都是相对的,每一个“甲方”在遇到需要跪舔的人之后都灰溜溜地变成了“乙方”。为了维系客户,同时也是为了业绩,小A不得不忍受客户

    2020/03/30
  • breathingearth小白攻略_会看到有许多不断闪烁的星星,这代表地球上刚出生和去世的人

    breathingearth小白攻略 官方网址:http://www.breathingearth.net/ 简介描述:会看到有许多不断闪烁的星星,这代表地球上刚出生和去世的人 打…

    2020/03/08
  • 你知道哪些html事件不能冒泡?小白帮助_js事件小白教程

    事件冒泡是指当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这 一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。 我们都知道一般事件的流程是:事件捕捉——>目标元素发生事件——>事件冒泡。但是不是所有的事件和click事件都一样是冒泡的,那么如何判断给事件是否不能冒泡呢?可以

    2020/04/05
  • Apostrophe CMS小白攻略_一个基于 Node.js 开发的内容管理系统

    Apostrophe CMS小白攻略 官方网址:http://apostrophecms.org/ GitHub:https://github.com/apostrophecms/…

    2020/03/06
  • 面试WEB前端如何才能通过?小白攻略_前端菜鸟教程

    从事web前端工作七年时间,因为一直是非常热爱编程的,从小就有兴趣,大学就是学计算机的,技术应该比一般同龄的都要好一些,今天我想给大家讲述一下,目前想要做web前端开发,面试成功应该如何去学习,要具备哪些技术。很多人说我们这行饱和了,说了至少有五六年了,但是以我的从业经验来看,我们这行永远都不会饱和,因为任何一家公司永远都缺web前端工程师的岗位,项目是不间

    2020/04/05
  • whs.js基础教程_基于three.js的超快3D框架

    whs.js基础教程 官方网址:https://whs.io GitHub:https://github.com/WhitestormJS/whs.js 简介描述:基于three….

    2020/03/06
  • React useEffect的源码解读小白基础_源码教程视频

    前言对源码的解读有利于搞清楚Hooks到底做了什么,如果您觉得useEffect很“魔法”,这篇文章也许对您有些帮助。本篇博客篇幅有限,只看useEffect,力求简单明了,带您到React Hooks的深处看看按图索骥找到Hook相关源码(可以直接跳)首先我们从Github上得到react的源码,然后可以在packages中找到react文件夹,其中的in

    2020/03/20
  • britecharts使用攻略_基于D3.js v4的客户端可复用的图表库

    britecharts使用攻略 官方网址:http://eventbrite.github.io/britecharts/ GitHub:https://github.com/ev…

    2020/03/10
  • 使用Typescript装饰器来劫持React组件攻略教程_组件小白知识

    最近在捣鼓Typescript的装饰器,NodeJs项目的装饰器比较好理解,但是React项目的装饰器由于有JSX,走了一点弯路,但是总之来说是新技能gettypescript对装饰器的说明装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上。 装饰器使用 @expression这种形式,expression求值后必须为一个函数,它

    2020/03/26
  • SceneLab使用帮助_在线创意桌面设计工具

    SceneLab使用帮助 官方网址:https://scenelab.io/ 简介描述:在线创意桌面设计工具 SceneLab是一款快发挥设计师想象力的设计工具,专门为喜欢摆拍工作…

    2020/03/10