精华内容
下载资源
问答
我要提问
  • vue路由跳转页面的几种方式
    千次阅读
    2022-03-31 15:46:15

    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路由跳转原理（哈希模式）

     千次阅读 2019-10-12 05:56:55
    概述 哈希模式（利用`hashchange` 事件监听 url的hash 的改变...核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不做跳转。跟传统开发模式url改变后 立刻发起请求，响应整个页面，渲染整个页面...

    概述

    哈希模式（利用`hashchange` 事件监听 url的hash 的改变）

    ```

    window.addEventListener('hashchange', function(e) {

      console.log(e)

    })

    ```

    核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不做跳转。跟传统开发模式url改变后 立刻发起请求，响应整个页面，渲染整个页面比路由的跳转用户体验更好

    代码

    <!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <a href="#/login">登录</a>

    <a href="#/register">注册</a>

    <div id="app"></div>

    <script type="text/javascript">

       var appdiv=document.getElementById('app')

       window.addEventListener('hashchange', function(e) {

             console.log(location.hash)

             switch(location.hash){

               case '#/login':

               appdiv.innerHTML='我是登录页面';

               break;

               case '#/register':

               appdiv.innerHTML='我是注册页面';

               break;

             }

           })

    </script>

</body>

</html>

     

    运行效果

     

    收起
    展开全文

  • 详解vue 路由跳转四种方式 (带参数)

     2020-12-29 05:02:42
    1. router-link ...// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 // params传参数 (类似post) // 路由配置 path: /home/:id 或者 path: /home:id
    收起

  • Vue路由跳转问题记录详解

     2020-08-30 06:18:16
    本篇文章主要介绍了Vue路由跳转问题记录详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    收起

  • vue路由拦截及页面跳转的设置方法

     2020-08-27 10:57:22
    主要介绍了vue路由拦截及页面跳转的设置方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    收起

  • vue相同路由跳转强制刷新该路由组件操作

     2020-10-14 23:34:47
    主要介绍了vue相同路由跳转强制刷新该路由组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    收起

  • vue 实现路由跳转时更改页面title

     2020-10-16 01:34:23
    今天小编就为大家分享一篇vue 实现路由跳转时更改页面title，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    收起

  • vue2.0项目实现路由跳转的方法详解

     2020-11-30 17:40:52
    1、安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖，说明安装成功 2、vue项目引入vue-ruoter： 二、应用 1、路径配置（页面跳转）： 方法一：如果切换的页面不...
    收起

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

     2020-10-15 08:25:10
    在本篇文章和里小编给各位总结了关于vue路由跳转传递参数的三种方式以及相关代码，需要的朋友们可以学习下。
    收起

  • 解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题

     2020-10-18 04:14:30
    今天小编就为大家分享一篇解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    收起

  • vue页面跳转实现页面缓存操作

     2020-11-20 04:38:27
    在路由里面设置需要缓存的页面 第二步 使用keep-alive属性包裹需要缓存的页面使用v-if判断，为true的是需要缓存的，false是不需要缓存的 第三步 在需要缓存的页面设置导航钩子，在A野区离开时将值设置为false保证...
    收起

  • vue路由跳转时判断用户是否登录功能的实现

     2020-08-29 00:45:27
    下面小编就为大家带来一篇vue路由跳转时判断用户是否登录功能的实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    收起

  • vue子路由跳转实现tab选项卡

     2020-10-16 15:58:05
    主要为大家详细介绍了vue子路由跳转实现tab选项卡，完成一个简单的tab选项卡布局，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    收起

  • vue路由跳转以及路由传参&接收

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

    路由跳转

    1.声明式路由跳转

    （不带参数）

    通过router-link标签进行跳转，使用name或者path都可以，在dom结构中会被渲染成a标签
    注意：router-link中链接如果是’/‘开始就是从根路由开始，如果开始不带’/’，则从当前路由开始。

         <router-link :to="{name:'home'}"> 
	 <router-link :to="{path:'/home'}">

    （带参数）

    注意：
    params传参数 (类似post)
    路由配置 path: "/home/:id"
    不配置path，路由跳转可请求，刷新页面传递的参数会丢失，
    配置path，刷新也买你id会被保留

    <router-link :to="{name:'home', params: {id:1}}"> 

    <router-link :to="{name:'home', query: {id:1}}">

    获取路由跳转传递的参数：
    html 通过 $route.params.id， script 通过this.$route.params.id

    2.编程式路由跳转

    1.字符串形式

    router.push('home')

    2.对象形式

    router.push({ path: 'home' })
router.push({ name: 'user'})

    3.函数内调用
    （不带参数）

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

    （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
    （params传参）
    只可以使用name

    this.$router.push({name:'home',params: {id:'1'}})

    html 取参$route.params.id， script 取参this.$route.params.id

    3.query和params的区别

    query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在

    params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

    收起
    展开全文
    javascript 前端

  • Vue路由的跳转和传参

     2021-06-22 15:32:18
    Vue路由跳转的两种方式、路由传参的两种方式
    收起

  • 解决vue+router路由跳转不起作用的一项原因

     2020-11-20 02:20:13
    如下所示： Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: Login }, { path: '/login', component: Login }, ...补充知识：vue-router配置后地址栏输入跳转不
    收起

  • 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.js中路由配置代码： 

    import Layout from '@/layout'

const repairRouter = {
  path: '/repair',
  component: Layout,
  alwaysShow: true,
  redirect: '/repair/my-repair-order',
  name: 'repair',
  meta: {
    title: '工单管理',
    icon: 'clipboard',
    perms: ['repair']
  },
  children: [
    {
      path: 'create-repair',
      name: 'createRepair',
      hidden: true,
      component: () => import('@/views/process/repair/repairCreate.vue'),
      meta: {
        title: '新建工单申请',
        perms: ['create-repair']
      }
    },
    {
      path: 'my-repair-order',
      name: 'myRepairOrder',
      noShowingChildren: true,
      component: () => import('@/views/process/repair/myRepairOrder.vue'),
      meta: {
        title: '我申请的工单',
        perms: ['repair-order']
      }
    },
    {
      path: 'repair-order-detail',
      name: 'repairOrderDetail',
      component: () => import('@/views/process/repair/myRepairOrderDetail.vue'),
      meta: {
        title: '工单申请详情',
        perms: ['repair-order-detail'],
        hidden: true
      }
    }

  ]
}
export default repairRouter

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

    1. 不带参数

    this.$router.push('/repair/repair-order-detail')
this.$router.push({name:'repairOrderDetail'})
this.$router.push({path:'/repair/repair-order-detail'})

    2. query传参 

    参数为属性值：

//其中参数deviceId可以加''，也可以不加
this.$router.push({name:'repairOrderDetail',query: {deviceId: row.id}})
this.$router.push({path:'/repair/repair-order-detail',query: {deviceId: row.id}})

参数为对象：

//其中参数data可以加''，也可以不加
this.$router.push({name:'repairOrderDetail',query: {data: row}})
this.$router.push({path:'/repair/repair-order-detail',query: {data: row}})



// html 取参  $route.query.deviceId/data
// script 取参  this.$route.query.deviceId/data

    3. params传参 

    参数为属性值：

//其中参数deviceId可以加''，也可以不加
this.$router.push({name:'repairOrderDetail',params: {deviceId: row.id}})

参数为对象：

//其中参数data可以加''，也可以不加
this.$router.push({name:'repairOrderDetail',params: {data: row}})


//此处只能用name，用path接收不到参数

// 路由配置 path: "/repair-order-detail/:id" 或者 path: "/repair-order-detail:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留

//参数为对象时原理同上，但是要注意，对象传参的话，需要先JSON.stringify(row)处理之后再传，否则再次刷新会丢失数据
 
// html 取参  $route.params.id
// script 取参  this.$route.params.id
    query和 params区别
    query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
     
    params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

    4. 直接路径传参 

    // 此时路由必须配置为 path: "/repair-order-detail/:id" 
// 不能为 path: "/repair-order-detail:id" 或者 "/repair-order-detail"会报400错误 
this.$router.push(`/repair/repair-order-detail/${row.id}`)
this.$router.push('/repair/repair-order-detail/' + row.id)
this.$router.push(`/repair/repair-order-detail/` + row.id)


//此处也可以传对象，但是传对象之前需要将对象转成JSON格式的字符串


// html 取参  $route.params.id
// script 取参  this.$route.params.id

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

    3.this.$router.go(n)

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

    VUE几种路由跳转几种方式的区别

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

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

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

    收起
    展开全文
    前端

  • 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-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实现路由跳转和嵌套

     2020-08-30 04:59:32
    本篇文章主要介绍了Vue实现路由跳转和嵌套，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    收起

  • 解决vue 路由变化页面数据不刷新的问题

     2020-08-27 21:08:44
    下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    收起

  • vue路由跳转传参数的方法

     2020-12-29 04:05:13
    vue中路由跳转传参数有多种,自己常用的是下面的几种 ... 通过编程导航进行路由跳转  1. router-link > 1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航 2. p
    收起

  • vue路由对不同界面进行传参及跳转的总结

     2020-10-17 03:14:08
    主要介绍了vue路由对不同界面进行传参及跳转的总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    收起

  • vue 路由跳转页面不刷新

     2022-04-18 13:09:35
    <!-- 添加:key="$route.fullPath"防止同路由页面不刷新问题 --> <router-view :key="$route.fullPath"></router-view> 在router-view 里边添加 ：key=“$route.fullPath”
    收起

  • vue中路由跳转不计入history的操作

     2020-10-14 18:14:03
    主要介绍了vue中路由跳转不计入history的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    收起

  • Vue.js实战之利用vue-router实现跳转页面

     2020-11-30 19:35:23
    使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 官方文档： https://router.vuejs.org/zh-cn/essentials/getting-started.html ...
    收起

  • 解决vue单页路由跳转后scrollTop的问题

     2020-10-18 02:32:28
    今天小编就为大家分享一篇解决vue单页路由跳转后scrollTop的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,346
精华内容 21,338
热门标签
关键字：

vue的路由跳转原理