vue常见问题及解决方法（一）

• 列表进入详情页的传参问题
• 路由懒加载（也叫延迟加载）

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

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

// query通过path切换路由
前往Detail页面
// params通过name切换路由
前往Detail页面

编程式的跳转：

//跳转到上一次浏览的页面
 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切换路由
   前往Detail页面
   // params通过name切换路由
   前往Detail页面
   

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没有定义
   前往Detail页面
   
   // 在详情页接收
   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) 
        }
   ]
})