vue-route使用中遇到的小问题

Vue-Router的一些小问题

  1. 路由懒加载
  2. 重定向和跳转置顶
  3. 去除url中的#键

一、路由懒加载

1、原始写法

初次认识vue-route就是这么写的

import VueRouter from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
  ]
})

一开始没觉得什么不妥,毕竟是在本地开发,渲染速度并不慢,但是打包上传服务器后发现,首页加载时间比预计长 原因就是上述写法会一次拉取所有路由匹配的组件,虽然加载完后切页快,但是首页加载太慢了。

2、懒加载

这是官方解释 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块, 然后当路由被访问的时候才加载对应组件,这样就更加高效了。

顾名思义,不要的时候我就懒得加载,要了我又给你。这样一来,加载首页的同时不会去加载别的组件也就加快了渲染速度。

可以这么写

import VueRouter from 'vue-router'
Vue.use(VueRouter);

export default new Router({
  routes: [
    {
      path: '/HelloWorld',
      component: (resolve) => require(['../components/HelloWorld.vue'], resolve)
    },
  ]
})

参考官方文档: 路由懒加载|Vue Route

二、重定向和跳转置顶

1、重定向

当用户输入地址/a时,让其跳转到/b,也可以用到首页的加载

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

//或者
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: {(resolve) => require(['../components/b.vue'], resolve)} }
  ]
})

//也用于首页的重定向,通常首页的路由都是 / ,没有指定名字
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/bloghome'}
  ]
})

参考官方文档: 重定向|Vue Route

2、跳转置顶

初次使用可能会发现我在首页底部位置点击其他页面时,也会出现在底部这个就要利用Vue Route的滚动行为来解决了

比较简单的写法

scrollBehavior (to, from, savedPosition) {
   return { x: 0, y: 0 }
}

路由跳转时回到顶部

三、去除url中的#键

初次开发Vue的时候会发现这url里面怎么有个 # 号键,一点也不好看

这是因为路由的两种模式 hash 和 history,默认为 hash 也就是带 # 号键的

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

这样修改后地址就变为 http://www.tzwlink.xyz/home 这样的形式了

以下两个小问题前提都是部署在nginx上发生的

小问题一

这样的写法打包上线后只能通过主页打开,用其他页面的url打开就返回404了

由于我用的是nginx,所以解决方法按官方给的如下:

location / {
  //....
  //....
  try_files $uri $uri/ /index.html;
}

小问题二

如果路由中采取parmas的方式传参,比如:

{
   path: '/home/:id',
   name: 'home',
   component: (resolve) => require(['../components/home.vue'], resolve)
},

//组件A
this.$router.push({
   path: '/home',
   name: 'home',
   parmas: {
      id: 123
   }
})
//组件B
this.$route.parmas.id;

那么访问诸如 www.xxx.com/home 时这样没问题,直接用这个地址也可以

如果是 www.xxx.com/home/id (id可能是你定义的某个并且直接显示数值的)这样,通过别的页面跳转过来没问题

但是如果直接在浏览器url中输入访问,就发现少了东西或者白屏

原因

parmas是路由的一部分,你可能会在别的组件中用 $router.push() 的方式控制跳转,所以它是随着路由一起跳转, 从别人那跑来的,但是直接访问,他就没了参数信息,页面失去一部分数据,渲染也受到了影响。

解决

采用路由传参的第二种方式 query。

它的方式与parmas差不多,也可以用 $router.push() 来跳转

//组件A
this.$router.push({
   path: '/home',
   name: 'home',
   query: {
      id: 123
   }
})
//组件B
this.$route.query.id;

不一样的是,对于query 方式。跳转时你可以看到 url 上会有常见的 ?id=123 这样携带参数的方式,因为他就是普通的的 url 带参数跳转, 所以也就不依赖于别的组件传参,他的参数直接在 url 上,直接访问能获取,别的页面跳转来也有。

参考官方文档:

history|Vue Route

路由传参|Vue Route

本文为原创文章,若文章内容出现抄袭雷同,请联系文章发布人或者网站管理员,我们将认真核实并及时删除。 除非另有说明,否则此博客中的所有文章均根据CC BY-NC-SA 4.0许可。如需转载请标明出处,谢谢配合!

END--感谢阅读

来发表你的感想吧~

  • 路过~
    • 你好啊