精华内容
下载资源
问答
  • vue路由跳转
    千次阅读
    2021-03-07 07:25:03

    现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据。

    父组件中:

    methods:

    方案一:

    getDescribe(id) {

    // 直接调用$router.push 实现携带参数的跳转

    this.$router.push({

    path: `/describe/${id}`,

    })

    方案一,需要对应路由配置如下:

    {

    path: '/describe/:id',

    name: 'Describe',

    component: Describe

    }

    很显然,需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

    $route.params.id

    方案二:

    父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。

    this.$router.push({

    name: 'Describe',

    params: {

    id: id

    }

    })

    对应路由配置: 注意这里不能使用:/id来传递参数了,因为父组件中,已经使用params来携带参数了。

    {

    path: '/describe',

    name: 'Describe',

    component: Describe

    }

    子组件中: 这样来获取参数

    $route.params.id

    方案三:

    父组件:使用path来匹配路由,然后通过query来传递参数

    这种情况下 query传递的参数会显示在url后面?id=?

    this.$router.push({

    path: '/describe',

    query: {

    id: id

    }

    })

    对应路由配置:

    {

    path: '/describe',

    name: 'Describe',

    component: Describe

    }

    对应子组件: 这样来获取参数

    $route.query.id

    这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是

    $router 这很重要~~~

    更多相关内容
  • 1. router-link ...// 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。 2.带参数 // params传参数 (类似post) // 路由配置 path: /home/:id 或者 path: /home:id
  • 本篇文章主要介绍了Vue路由跳转问题记录详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 在本篇文章和里小编给各位总结了关于vue路由跳转传递参数的三种方式以及相关代码,需要的朋友们可以学习下。
  • vue路由跳转

    万次阅读 2022-01-13 14:26:50
    一、vue路由跳转方式 1.router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> // name,path都行, 建议用name // 注意:router-link中链接如果是'/'...

    一、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', params: {id:1}}">  
     
    // params传参数 (类似post)
    // 路由配置 path: "/home/:id" 或者 path: "/home:id" 
    // 不配置path ,第一次可请求,刷新页面id会消失
    // 配置path,刷新页面id会保留
     
    // html 取参  $route.params.id
    // script 取参  this.$route.params.id
     
     
    <router-link :to="{name:'home', query: {id:1}}"> 
     
    // query传参数 (类似get,url后面会显示参数)
    // 路由可不配置
     
    // html 取参  $route.query.id
    // script 取参  this.$route.query.id

    2.this.$router.push()

    
    1.  不带参数
     
    this.$router.push('/home')
    this.$router.push({name:'home'})
    this.$router.push({path:'/home'})
     
    
    // path 和 Name路由跳转方式,都可以用query传参
    // params传参,push里面只能是 name:'xxx',不能是path:'/xxx',因为params只能用name来引入路由,如    
       果这里写成了path,接收参数页面会是undefined;
    
     
    2. query传参 
     
    this.$router.push({name:'home',query: {id:'1'}})
    this.$router.push({path:'/home',query: {id:'1'}})
     
    // html 取参  $route.query.id
    // script 取参  this.$route.query.id
     
     
     
    3. params传参
     
    this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name
     
    // 路由配置 path: "/home/:id" 或者 path: "/home:id",配置是在router文件里配置的
    // 不配置path ,第一次可请求,刷新页面id会消失
    // 配置path,刷新页面id会保留
     
    // html 取参  $route.params.id
    // script 取参  this.$route.params.id
     
     
     
    4. query和params区别
    query:类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用    
           params刷新页面id还在;
     
    params:类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失;
    

    3.this.$router.replace()  (用法同上,push)

    4.this.$router.go(n) 

    this.$router.go(n)
    // 向前或者向后跳转n个页面,n可为正整数或负整数
    
    // 在浏览器记录中向前进一步,等同于history.forward()
    router.go(1)
    
    // 后退一步记录,等同于history.back()
    router.go(-1)
    

    总结区别:

    this.$router.push
    跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面

    this.$router.replace
    跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)

    this.$router.go(n)
    向前或者向后跳转n个页面,n可为正整数或负整数

    二、$ router和$ route的区别
    $router : 是路由操作对象,只写对象
    $route : 路由信息对象,只读对象

    $ router操作路由跳转

    this.$router.push({ name:‘hello’, params:{ name:‘word’, age:‘11’ } })

    $route读取 路由参数接收

    var name = this.$route.params.name;
     

    展开全文
  • vue路由跳转页面的几种方式

    千次阅读 2022-03-31 15:46:15
    // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用...

    1.声明式导航router-link

    // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。
    <router-link :to="{name:'home'}">  
    <router-link :to="{path:'/home'}"> //name,path都行, 建议用name 

    1.2

    <router-link :to="{name:'home', params: {id:1}}">
    <router-link :to="{name:'home', query: {id:1}}">  
    <router-link :to="/home/:id">  
    //传递对象
    <router-link :to="{name:'detail', query: {item:JSON.stringify(obj)}}"></router-link> 

    2.编程式导航 this.$router.push()

    不带参数
    this.$router.push('/home')
    this.$router.push({name:'home'})
    this.$router.push({path:'/home'}
    
    带参数  query传参
    1.路由配置:
    name: 'home',
    path: '/home'
    2.跳转:
    this.$router.push({name:'home',query: {id:'1'}})
    this.$router.push({path:'/home',query: {id:'1'}})
    3.获取参数
    html取参: $route.query.id
    script取参: this.$route.query.id

    3.params传参

    1.路由配置:
    name: 'home',
    path: '/home/:id'(或者path: '/home:id')
    2.跳转:
    this.$router.push({name:'home',params: {id:'1'}})
    注意:
    // 只能用 name匹配路由不能用path
    // params传参数(类似post)  路由配置 path: "/home/:id" 或者 path: "/home:id"否则刷新参数消失
    3.获取参数
    html取参:$route.params.id 
    script取参:this.$route.params.id
    
    
    

    4.直接通过path传参

    1.路由配置:
    name: 'home',
    path: '/home/:id'
    2.跳转:
    this.$router.push({path:'/home/123'}) 
    或者:
    this.$router.push('/home/123') 
    3.获取参数:
    this.$route.params.id

    5.this.$router.go(n)

    向前或者向后跳转n个页面,n可为正整数或负整数

    6.跳转页面打开新窗口并携带参数

     const routeData = this.$router.resolve({
                    path: `/workbench/customer_detail/${this.audioFrom.import_id}`
                })
    window.open(routeData.href, '_blank')

    7.跳转新项目并携带参数

      window.open(`https://hao123/#/workbench/customer_detail/${this.audioFrom.import_id}`)

    展开全文
  • Vue路由跳转与接收参数

    千次阅读 2022-02-15 11:43:55
    Vue路由跳转与接收参数 路由跳转四种方式 (带参数) 1) router-link 1.不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router...

    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', params: {id:1}}"> 
    // params传参数 (类似post)
    // 路由配置 path: "/home/:id" 或者 path: "/home:id" 
    // 不配置path ,第一次可请求,刷新页面id会消失
    // 配置path,刷新页面id会保留
    // html 取参 $route.params.id
    // script 取参 this.$route.params.id
    
    <router-link :to="{name:'home', query: {id:1}}"> 
    // query传参数 (类似get,url后面会显示参数)
    // 路由可不配置
    // html 取参 $route.query.id
    // script 取参 this.$route.query.id
    

    2) this.$router.push() (函数里面调用)

    1.不带参数
    this.$router.push('/home')
    this.$router.push({name:'home'})
    this.$router.push({path:'/home'})
    
    2.query传参 
    this.$router.push({name:'home',query: {id:'1'}})
    this.$router.push({path:'/home',query: {id:'1'}})
    // html 取参 $route.query.id
    // script 取参 this.$route.query.id
    
    3.params传参
    this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
    // 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
    // 不配置path ,第一次可请求,刷新页面id会消失
    // 配置path,刷新页面id会保留
    // html 取参 $route.params.id
    // script 取参 this.$route.params.id
    
    4.纯页面跳转
    	<template>
    	<div>
    	  <router-link 
    	    :to="{
    	          path: '你要跳转的路由', 
    	          params: { 
    	              name: 'name',  // params为传送的参数,name为router.js里为页面配置的name
    	              data: data
    	          },
    	          query: {
    	              name: 'name', //query和params也是传送的参数,区别在于query会在路径上显示参数
    	              data: data
    	          }
    	        }">
    	   </router-link> 
    	  </div>
    	</template>
    	
    5.通过js控制:
    	<template>
    	  <div>
    	   <button @click="lookDetail()">跳转</button>
    	  </div>
    	</template>
    	
    	<script>
    	export default {
    	  data() {
    	
    	  },
    	  methods: {
    	    lookDetail() {
    	      this.$router.push({
    	        path: '',
    	        name: name, // 要跳转的路径的 name,可在 router 文件夹下的 index.js 文件内找
    	        //params: params
    	        params: {
    	        	id:id
    			}
    	      })
    	    }
    	  }
    	}
    	</script>
    
    6.query和params区别
    query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
    params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失
    
    
    

    3) this.$router.replace() (用法同上,push)

    4) this.$router.go(n)

    向前或者向后跳转n个页面,n可为正整数或负整数

    ps:区别

    this.$router.push
    跳转到指定url路径,并向history栈中添加一个记录,点击后退会返回到上一个页面
    
    this.$router.replace
    跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)
    
    this.$router.go(n)
    向前或者向后跳转n个页面,n可为正整数或负整数
    

    二、获取参数得两种方法

    获取参数的两种常用方法:params和query

    (1)由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。及通过路由配置的name属性访问

    请添加图片描述请添加图片描述

    this.$router.push({name:"menuLink",params:{alert:"页面跳转成功"}})
    

    (2)在目标页面通过this.$route.params获取参数:

    <p>提示:{{this.$route.params.alert}}</p>
    

    (3)在目标页面通过this.$route.query 获取参数

    //传值
    this.$router.push({path:"/menLink",query:{alert:"页面跳转成功"}})
    
    //用query获取值
    <p>提示:{{this.$route.query.alert}}</p>
    

    三、Vue - 路由传一个Object参数,刷新页面后数据变成“[Object Object]“ 解决方案

    路由传一个Object参数,刷新页面后数据变成"[Object Object]" 解决方案
    解决方案使用 JSON 转译
    1、 传参:JSON.stringify()

    let videoObj = JSON.stringify(obj);
    this.$router.push({
      name: "playVideo",
      params: { video: videoObj },
    });
    
    

    2、 接收参数:JSON.parse()

    this.video = JSON.parse(this.$route.params.video);
    console.log(this.video)
    
    
    展开全文
  • vue路由跳转传参的几种方式

    千次阅读 2022-04-07 14:20:16
    需求是跳转至工单申请详情页面 vue.js中路由配置代码: import Layout from '@/layout' const repairRouter = { path: '/repair', component: Layout, alwaysShow: true, name: 'repair', meta: { title: ...
  • vue路由跳转的四种方法

    千次阅读 2021-11-26 11:54:42
    vue路由跳转有四种方式 router-link this.$router.push() (函数里面调用) this.$router.replace() (用法同push) this.$router.go(n) 一、不带参 1.1 router-link <router-link :to="{name:'home'}">...
  • VUE路由跳转后自动刷新一次页面

    千次阅读 2022-07-21 10:03:53
    VUE实现router路由跳转后自动刷新一次页面
  • vue路由跳转以及路由传参&接收

    千次阅读 2022-03-29 12:39:44
    路由跳转 1.声明式路由跳转 (不带参数) 通过router-link标签进行跳转,使用name或者path都可以,在dom结构中会被渲染成a标签 注意:router-link中链接如果是’/‘开始就是从根路由开始,如果开始不带’/’,则从...
  • vue路由跳转 定位到页面顶部

    千次阅读 2022-04-05 07:41:38
    Vue-router 路由跳转之后,页面默认停留在当前浏览的位置, 想要的是路由跳转之后,页面重新定位到顶部, 1.下面介绍一下可以实现的方法: 在理由配置文件中,添加以下代码即可 import Vue from 'vue' import ...
  • Vue 路由 跳转【返回、刷新、跳转

    千次阅读 2022-03-23 00:37:53
    Vue 路由 跳转【返回、刷新、跳转】this.$router.go(-1)this.$router.back()this.$router.pushthis.$router.replace this.$router.go(-1) 原页面表单中的内容会丢失; 向前或者向后跳转n个页面,n可为正整数或负整数...
  • 下面小编就为大家带来一篇vue路由跳转时判断用户是否登录功能的实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 1、路由跳转 2、back:回退 ; forward:前进; go:前进多步
  • vue路由跳转的四种方式 vue路由跳转的四种方式 router-link this.$router.push() this.$router.replace() //用法同push this.$router.go(n) router-link使用方式: <router-link :to ="{ name:'...
  • Vue路由跳转-页面显示空白

    千次阅读 2022-05-07 15:35:55
    跳转页面,指定路径跳转到某个页面时,如果没有按照正确的方式写路径,会导致页面显示空白 html部分 方法1、 <div class="nav-item-1" @click="navitem">拼团专区</div> 方法2、 <router-link ...
  • vue 路由跳转很慢,页面卡死

    千次阅读 2022-05-26 18:16:42
    原因:在路由跳转时,vue销毁页面数据用时过长,导致页面卡顿。经过排查发现页面中有一个select下拉选择框,数组有1w+,造成了页面卡死现象。 解决: //在获取数据时进行处理,只展示10条 async getUserList() { ...
  • vue 路由跳转页面不刷新

    千次阅读 2022-04-18 13:09:35
    <!-- 添加:key="$route.fullPath"防止同路由页面不刷新问题 --> <router-view :key="$route.fullPath"></router-view> 在router-view 里边添加 :key=“$route.fullPath”
  • vue中路由跳转传参数有多种,自己常用的是下面的几种 ... 通过编程导航进行路由跳转  1. router-link > 1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航 2. p
  • Vue路由跳转的时候没有反应 引入路由是否正确 引入的组件是否正确 是否使用路由的… … 详细看下图 import Vue from 'vue' import Router from 'vue-router' import Main from '../components/Main' import Login...
  • vue 路由跳转并打开新页面【详细】

    千次阅读 2021-12-23 09:33:08
    1.路由 { path: '/Login', name: 'Login', ...2.点击路由跳转新页面 <button class="btns" type="button" @click="showLogdialog()">登录</button> methods: { // 登录 showLogdialog
  • vue 路由跳转 页面数据不更新问题

    千次阅读 2022-04-29 10:21:13
    原因:vue-router的切换不同于传统的页面切换,而是路 由之间的切换,其实就是组件之间的切换,引用相同组件的时候,会直接调用缓存而不会调用created(),mounted()函数。 解决方法: 第一种:在watch中监听路由变化...
  • 原因:其实就是因为路由跳转时有过度效果导致的在跳转的时候上一个路由还占着位置,所以把你布局顶下去了,然后页面跳转完了之后他占位消失,你的布局恢复原状。但是这样虽然只有一秒不到的时间,也造成了布局上下闪...
  • vue路由跳转动态title标题信息

    千次阅读 2022-03-10 10:05:44
    想要让浏览器的标题,随着vue路由跳转的改变而改变,就要配置router/index.js文件里的信息。在meta对象里面配置一个title。 { path: "/", name: "Home", meta: { title: "首页"//这是重点 }, component: () ...
  • Vue路由跳转及路由监听

    千次阅读 2021-02-23 18:41:06
    路由跳转 this.$router.push('/Student'); 路由监听 watch:{ $route:{ handler:function (val,oldVal) { if (val.path === '/Student') { this.findAll(); } }, deep:true } },
  • vue路由跳转刷新页面

    千次阅读 2021-04-20 15:42:20
    路由跳转后地图上的数据不显示。 2 . 直接刷新整个页面。 首先呢,这次的bug是因为首页的地图显示出来了,可是地图上的数据没显示出来,而地图两边的前端数据又正常显示了。没有报错,根据警告上看是因为地图渲染...
  • Vue路由跳转但显示空白页面

    万次阅读 热门讨论 2021-08-03 12:09:58
    在router文件下的index.js 中配置了‘Hi’的子路由,但是点击跳转界面却不显示子路由的内容,但是url正常改变。 原因一: 没有在父路由中加上<router-view></router-view>,来将对应的组件内容渲染到...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 57,406
精华内容 22,962
关键字:

vue路由跳转