关于vue中路由的跳转和参数传递,参数获取

2024-12-03 21:09:44

vue中的路由讲三点

第一点：

指令级别的路由<router-link>和程序级别的路由router.push();

第二点：

通过query和params传递参数和path和name之间的关系。

第三点：

$router和$route地区别

声明：由于路由和传参和参数获取密切结合，所以将他们混合在一起讲解，最后会附加一个实例。

html中通过<router-link>指令完成路由跳转

第一种情况就是以path形式

<router-link v-bind:to="/foo">登幽州台歌</router-link>

第二种情况就是以路由对象Object的形式

<router-link :to="{ name: 'wuhan', query: {city: 'wuhan'}}">router1</router-link>

注意这里的name指的是具名路由，在路由列表中的配置如下

{ name: 'wuhan', path: '/wuhan', component: WuHan }

而WuHan则是这个路由要抵达的模板或者说页面，定义如下

const WuHan = {template: '<div>武昌， 汉口， 汉阳 --- {undefined{$route.query.city}}</div>'}

注意由于在<router-link>中是通过query的形式区传递参数，所有在目的地页面中也只能采用query的形式获取参数。

也可以不采用query的方法，而采用params的形式传递参数

<router-link :to="{ name: 'wuhan', params: {city: 'wuhan'}}">router3</router-link><br>

那么在在路由列表中的path中必须带上params传递过来的参数，否则在目的页面中无法获取参数

{ name: 'wuhan', path: '/wuhan/:city',component: WuHan }

在目的页面中以params的形式获取参数对应的值

const WuHan = {template: '<div>武昌， 汉口， 汉阳 --- {undefined{$route.params.city}}</div>'}

注意事项：不可以在<router-link>的路由对象中同时出现path和params，此时params作废。目的页面中获取不到参数。

推荐是name和params搭配，path和query搭配。最好时不用params而只是用query的形式传递参数以及获取参数，

因为采用params的方式传递参数，当你进入到目的页面后确实能够正确地获取参数,但是，当你刷新页面时，参数就会丢失。

所以推荐使用query地形式传递参数。

最后谈谈$router和$route地区别

结论：没有任何关系

$router地类型时VueRouter，整个项目只有一个VueRouter实例，使用$router是实现路由跳转的，$router.push()。

跳转成功后，抵达某一个页面，此时要获取从上一个页面传递过来的参数，此时使用$route。

或者是$route.query.city，或者是$route.params.city。也就是说，$router和$route作用在路由不同的阶段。

<html>
<head><meta charset="UTF-8"></head>
<body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <!-- use router-link component for navigation. -->
      <!-- specify the link by passing the `to` prop. -->
      <!-- <router-link> will be rendered as an `<a>` tag by default -->
      <router-link to="/foo">登幽州台歌</router-link>
      <router-link to="/bar">江雪</router-link>
      <router-link to="/city/中国">西安</router-link>
      <router-link to="/city/希腊">雅典</router-link>
      <router-link to="/book/史铁生">务虚笔记</router-link>

      <br>
      <router-link :to="{ name: 'wuhan', query: {city: 'wuhan'}}">router1</router-link><br>
      <router-link :to="{ path: '/wuhan', query: {city: 'wuhan'}}">router2</router-link><br>
      <router-link :to="{ name: 'wuhan', params: {city: 'wuhan'}}">router3</router-link><br>
    </p>
    <!-- route outlet -->
    <!-- component matched by the route will render here -->
    <router-view style="margin-top: 100px"></router-view>
  </div>
  <script>

    // 1. Define route components.
    // These can be imported from other files
    const Foo = { template: '<div>前不见古人，后不见来者。念天地之悠悠，独怆然而涕下！</div>'};
    const Bar = { template: '<div>千山鸟飞绝，万径人踪灭。孤舟蓑笠翁，独钓寒江雪。</div>' };
    const Capital = { template: '<div>时间已经摧毁了多少个西安城，雅典城。{{$route.params.country}}</div>' }
    const Book = {template: '<div>务虚笔记 ---by {{$route.params.author}}</div>'}
    const WuHan = {template: '<div>武昌， 汉口， 汉阳 --- {{$route.params.city}}</div>'}
    // 2. Define some routes
    // Each route should map to a component. The "component" can
    // either be an actual component constructor created via
    // Vue.extend(), or just a component options object.
    // We'll talk about nested routes later.
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar },
      { path: '/city/:country', component: Capital },
      { path: '/book/:author', component: Book },
      { path: '/wuhan/:city', name: 'wuhan', component: WuHan }
    ]

    // 3. Create the router instance and pass the `routes` option
    // You can pass in additional options here, but let's
    // keep it simple for now.
    const router = new VueRouter({
      routes: routes
    })
    /*
    function navigate() {
      router.push({
        path: '/wuhan',
        params: {
          city: 'wuhan'
        }
      });
    }
    */
    // 4. Create and mount the root instance.
    // Make sure to inject the router with the router option to make the
    // whole app router-aware.
    const app = new Vue({router: router}).$mount('#app')
    // Now the app has started!
  </script>
</body>
</html>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

vue路由跳转传递参数的方式总结

日常业务中,路由跳转的同时传递参数是比较常见的,传参的方式有三种: 1)通过动态路由方式 //路由配置文件中配置动态路由 { path: '/detail/:id', name: 'Detail', component: Detail } //跳转时页面 var id = 1; this.$router.push('/detail/' + id) //跳转后页面获取参数 this.$route.params.id 2)通过query属性传值 //路由配置文件中 { path: '/detail
Vue页面跳转传递参数及接收方式

最近接触了vue项目,这里记录一下vue跳转到下一页面携带参数的两种方式. 典型应用场景:列表页跳转到详情页一.配置路由文件路径:src/router/config.php import Vue from 'vue' import Router from 'vue-router' import classify from '.././components/classify/classify.vue' import classifyChild from '.././components/cla
vue-router实现组件间的跳转（参数传递）

通过VueRouter来实现组件之间的跳转:参数的传递,具体内容如下 login ---用户名--->main ①明确发送方和接收方 ②配置接收方的路由地址 {path:'/myTest',component:TestComponent} --> {path:'/myTest/:id',component:TestComponent} ③接收方获取传递来的数据 this.$route.params.id ④跳转的时候,发送参数 this.$router.push('/myTest/20') &
vue路由跳转传参数的方法

vue中路由跳转传参数有多种,自己常用的是下面的几种通过router-link进行跳转通过编程导航进行路由跳转 1. router-link <router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data }, query: { name: 'name', dataObj: data } }"> </router-link> 1. path -> 是要跳转的路由路径
详解vue 路由跳转四种方式 (带参数)

1. router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para
关于vue中路由的跳转和参数传递,参数获取

目录 vue中的路由讲三点 html中通过<router-link>指令完成路由跳转第一种情况就是以path形式第二种情况就是以路由对象Object的形式最后谈谈$router和$route地区别结论:没有任何关系 vue中的路由讲三点第一点: 指令级别的路由<router-link>和程序级别的路由router.push(); 第二点: 通过query和params传递参数和path和name之间的关系. 第三点: $router和$route地区别声明:由于路由和传
vue中路由跳转不计入history的操作

我就废话不多说了,大家还是直接看代码吧~ <van-field label="选择部门" :value="arr.DepartMentName" readonly right-icon="arrow" @click="$router.replace({ name: 'tree' })" /> 在下个页面使用replace跳回来即可补充知识:vue-router模式为history的项目打包发布后不能通过地址栏里的
vue中路由参数传递可能会遇到的坑

前言 vue中路由跳转传参数有多种,自己常用的是下面的几种通过router-link进行跳转通过编程导航进行路由跳转本文主要给大家介绍了关于vue路由参数传递遇到的一些坑,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 首先我的路由的定义 { path: '/b', name: 'B', component: resolve => require(['../pages/B.vue'], resolve) } 我从A组件跳转到B组件,并通过路由信息对象传递一些参数 this
vue中路由传参以及跨组件传参详解

路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$router.go(1); <router-link to="/course">课程页</router-link> <router-link :to="{name: 'course'}">课程页</router-link> 路由
Vue中路由守卫的具体使用

目录 1.全局守卫 1.1 全局前置守卫 1.2 全局后置路由守卫 1.3 整合 2. 路由独享的守卫 3.组件内的守卫作用:对路由进行权限控制分类:全局守卫.独享守卫.组件内守卫 1.全局守卫 1.1 全局前置守卫顾名思义,前置守卫主要是在你进行路由跳转之前根据你的状态去进行一系列操作(全局前置是为在路由初始化以及跳转之前都会触发) 你可以使用router.beforeEach注册一个全局前置守卫(Each:每个,即在任意一个路由跳转的时候都会触发) 每个守卫方法接收三个参数: to:
Spring Boot/VUE中路由传递参数的实现代码

在路由时传递参数,一般有两种形式,一种是拼接在url地址中,另一种是查询参数.如:http://localhost:8080/router/tang/101?type=spor&num=12.下面根据代码看一下,VUE 和 Spring Boot 中各自是如何处理传递和接受参数的. Spring Boot package com.tang.demo1.controller; import org.springframework.web.bind.annotation.*; @RestContro
vue中Npm run build 根据环境传递参数方法来打包不同域名

项目开发中,前端在配置后端api域名时很困扰,常常出现: 本地开发环境: api-dev.demo.com 测试环境: api-test.demo.com 线上生产环境: api.demo.com, 这次是在Vue.js项目中打包,教大家个方法: 使用 npm run build -- xxx ,根据传递参数xxx来判定不同的环境,给出不同的域名配置. 1.项目中/config/dev.env.js修改: 新增:HOST: '"dev"' 'use strict' const me
Vue中v-on的基础用法、参数传递和修饰符的示例详解

一.v-on的基本用法使用v-on:click给button绑定监听事件以及回调函数,@是v-on:的缩写,也就是简写也可以使用@click.方法一般是需要写方法名加上(),在@click中可以省掉,如上述的<button @click="increment">加</button>. 以简单的计数器为例 <body> <div id="app"> <h2>{{count}}</h2> <
PHP通过微信跳转的Code参数获取用户的openid(关键代码)

关键代码如下所示: //获取微信登录用户信息 function getOpenID($appid,$appsecret,$code){ $url="https://api.weixin.qq.com/sns/oauth2/access_token?appid=".$appid."&secret=". $appsecret."&code=".$code."&grant_type=authorization_code
vue中路由跳转的方式有哪些你知道吗

目录第一种方式:router-link (声明式路由) 第二种方式:router.push(编程式路由) 第三种方式:this.$router.push() (函数里面调用) 第四种方式:this.$router.replace() (用法同上,push) 参考: 总结第一种方式:router-link (声明式路由) 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/