Vue.js学习第十二天——动态路由、懒加载、嵌套路由及传递参数相关
一. 动态路由
- 背景:有时候当我们在访问某些页面的时候,一个页面的path路径可能是不确定的,比如会有这样一个场景:我们在用户登录的时候,我们希望它的路径不是一个固定的,例如 www.xxx.com/user,我们希望后面跟着用户的id,类似这样www.xxx.com/user/beanBag,这样的需求我们怎么实现呢?
- 使用: 1. 创建用户组件 user.vue
-
建立路由映射关系(userId指待会儿传进来的值)
{ path: '/user/:userId', component: user }
-
绑定router-link中的to属性
<router-link v-bind:to="'/user/'+userId">用户</router-link>
-
在data中传入数据
export default { name: 'App', data() { return { userId: 'beanBag' } } }
-
二. 路由懒加载
- 背景:当我们打包构建应用时,JavaScript包会变得非常大,影响页面加载,所以必须由一种方法来提升用户体验
- 了解: 在我们打包好的Js文件中我们会发现有三个文件,分别是app、manifest和vendor,这三个Js文件分别负责我们的业务代码、为打包代码做底层支撑以及第三方的一些代码(vue,axios…),app中将我们的不同文件作为数组的参数传入相关函数中处理,所以如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问时才加载对应组件,这样就能解决此问题
- 使用: 1. 结合Vue的异步组件和Webpack的代码
- AMD写法
- ES6写法(推荐使用)
const index = () => import('../components/index.vue'); //导入的时候就指定为懒加载
三. 嵌套路由
-
背景:当我们访问一个页面的时候,这个页面中有很多小的页面,倘若我们向以前一样配置映射关系,那么所有的路径都会是处于同一级别,不利于我们的管理,如果能够在大的路径下划分小的路径,就能方便我们的管理
-
使用: 1. 创建两个组件indexNews.vue和indexMessage.vue这两个组件是index界面下的两个子组件;
-
配置映射关系:
{ path: '/home', component: index, children: [ { path: 'message', component: indexMessage }, { path: 'news', component: indexNews } ] },
-
index.vue中创建这两个文件的入口
<router-link to='/home/news'>新闻</router-link> <router-link to='/home/message'>消息</router-link> <router-view></router-view>
-
-
拓展:为嵌套路由添加默认路径,在children中添加默认路由的配置即可
{
path: '/home',
component: index,
children: [
{
path: '',
redirect: 'message'
},
{
path: 'message',
component: indexMessage
},
{
path: 'news',
component: indexNews
}
]
},
四. 传递参数
- 使用:有 params 和 query 两种类型的传递方式
- 比较:
类型 | params | query |
---|---|---|
配置路由格式 | /router/:id | /router(一般配置) |
传递方式 | 在path后面跟上对应的值 | 对象中使用query的key作为传递方式 |
传递后形成的路径 | /router/beanBag | /router?id=beanBag |
使用场景 | 数据传递较少 | 数据传递较多 |
- query方式的使用:
-
创建profile组件
-
配置路由映射关系
-
在APP.vue中创建一个button(或者直接rputer-link标签),button监听点击事件profileClick方法,在方法中写相关代码传入参数
methods: { profileClick(){ this.$router.push({ path: '/profile', query: { name: 'beanBag', age:18 } }) } }
-
在profile.vue界面中使用参数
<template> <div> <h3>我是profile组件</h3> <p>{{$route.query.name}}</p> <p>{{$route.query.age}}</p> </div> </template>
-
要注意,在使用代码方式进行路由跳转的时候使用的是$router
,在拿到传入数据时使用的是$route
,$router
对象是vue-router中的一个实例,在整个vue-router实例中都会存在,而$route
只有在处于活跃路由时才会存在于对应的那个路由