精华内容
下载资源
问答
  • 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>

     

    运行效果

     

    展开全文
  • 1. router-link ...// 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。 2.带参数 // params传参数 (类似post) // 路由配置 path: /home/:id 或者 path: /home:id
  • 本篇文章主要介绍了Vue路由跳转问题记录详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了vue路由拦截及页面跳转的设置方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了vue相同路由跳转强制刷新该路由组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vue 实现路由跳转时更改页面title,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 1、安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2、vue项目引入vue-ruoter: 二、应用 1、路径配置(页面跳转): 方法一:如果切换的页面不...
  • 在本篇文章和里小编给各位总结了关于vue路由跳转传递参数的三种方式以及相关代码,需要的朋友们可以学习下。
  • 今天小编就为大家分享一篇解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 路由里面设置需要缓存的页面 第二步 使用keep-alive属性包裹需要缓存的页面使用v-if判断,为true的是需要缓存的,false是不需要缓存的 第三步 在需要缓存的页面设置导航钩子,在A野区离开时将值设置为false保证...
  • 下面小编就为大家带来一篇vue路由跳转时判断用户是否登录功能的实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要为大家详细介绍了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.idscript 通过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.idscript 取参this.$route.params.id

    3.queryparams的区别

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

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

    展开全文
  • Vue路由跳转和传参

    2021-06-22 15:32:18
    Vue路由跳转的两种方式、路由传参的两种方式
  • 如下所示: 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
    queryparams区别
    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实现路由跳转和嵌套,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue中路由跳转传参数有多种,自己常用的是下面的几种 ... 通过编程导航进行路由跳转  1. router-link > 1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航 2. p
  • 主要介绍了vue路由对不同界面进行传参及跳转的总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • <!-- 添加:key="$route.fullPath"防止同路由页面不刷新问题 --> <router-view :key="$route.fullPath"></router-view> 在router-view 里边添加 :key=“$route.fullPath”
  • 主要介绍了vue中路由跳转不计入history的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生。 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html ...
  • 今天小编就为大家分享一篇解决vue单页路由跳转后scrollTop的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,346
精华内容 21,338
关键字:

vue的路由跳转原理