vue-route使用中遇到的小问题
Vue-Router的一些小问题
- 路由懒加载
- 重定向和跳转置顶
- 去除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 上,直接访问能获取,别的页面跳转来也有。
参考官方文档:
本文为原创文章,若文章内容出现抄袭雷同,请联系文章发布人或者网站管理员,我们将认真核实并及时删除。 除非另有说明,否则此博客中的所有文章均根据CC BY-NC-SA 4.0许可。如需转载请标明出处,谢谢配合!