vue常见问题及解决方法(一)

1 篇文章 0 订阅
  • 列表进入详情页的传参问题
  • 路由懒加载(也叫延迟加载)

列表进入详情页的传参问题

关联知识点 ——路由跳转的方式
声明式的跳转:

// query通过path切换路由
<router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail页面</router-link>
// params通过name切换路由
<router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail页面</router-link>

编程式的跳转:

//跳转到上一次浏览的页面
 this.$router.go(-1)
           
//指定跳转的地址,我们自己设置的路由地址
this.$router.replace('/pathname')
           
//指定跳转路由的名字下,pathname是我们自身为路由设置的名字
this.$router.replace({name:"pathname"})
          
//通过push进行跳转,我们自己设置的路由地址或者我们自己设置的名字
this.$router.push('/pathname')
this.$router.push({name:'pathname'})
this.$router.push({ path: '/pathname/${id}'}) //id为参数

传参的方式:query、params+动态路由传参

两者的区别:

  1. query通过path切换路由,params通过name切换路由

    // query通过path切换路由
    <router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail页面</router-link>
    // params通过name切换路由
    <router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail页面</router-link>
    
  2. query通过this.$route.query来接收参数,params通过this.$route.params来接收参数。

    // query通过this.$route.query接收参数
    created () {
        const id = this.$route.query.id;
    }
    
    // params通过this.$route.params来接收参数
    created () {
        const id = this.$route.params.id;
    }
    
  3. query传参的url展现方式:/detail?id=1&user=123&identity=1&更多参数
    params+动态路由的url方式:/detail/123

  4. params动态路由传参,一定要在路由中定义参数,然后在路由跳转的时候必须要加上参数,否则就是空白页面,而query传参则不用:

    对应的路由配置:

    {      
        path: '/detail/:id',      
        name: 'Detail',      
        component: Detail    
    },
    

    注意,params传参时,如果没有在路由中定义参数,也是可以传过去的,同时也能接收到,但是一旦刷新页面,这个参数就不存在了。这对于需要依赖参数进行某些操作的行为是行不通的,因为你总不可能要求用户不能刷新页面吧。 例如:

    // 定义的路由中,只定义一个id参数
    {
        path: 'detail/:id',
        name: 'Detail',
        components: Detail
    }
    
    // template中的路由传参,
    // 传了一个id参数和一个token参数
    // id是在路由中已经定义的参数,而token没有定义
    <router-link :to="{name: 'Detail', params: { id: 1, token: '123456' }}">前往Detail页面</router-link>
    
    // 在详情页接收
    created () {
        // 以下都可以正常获取到
        // 但是页面刷新后,id依然可以获取,而token此时就不存在了
        const id = this.$route.params.id;
        const token = this.$route.params.token;
    }
    

参考:

  1. vue路由传参的三种基本方式
  2. vue 关于路由跳转方法

路由懒加载(也叫延迟加载)

路由懒加载可以帮我们在进入首屏时不用加载过度的资源,从而减少首屏加载速度。在路由文件中,

非懒加载写法:

import Index from '@/page/index/index';
export default new Router({  
    routes: [    
        { 
            path: '/', 
            name: 'Index',     
            component: Index 
        }
    ]
})

路由懒加载写法:

export default new Router({
  routes: [    
        { 
            path: '/', 
            name: 'Index', 
            component: resolve => require(['@/view/index/index'], resolve) 
        }
   ]
})
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值