[vue-router4快速入门] 3.给route增加更多的信

2021-09-22  本文已影响0人  林哥学前端

在我们之前写的路由代码里面,给每个路由只写了两个字段,path表示路由的路径,component表示对应的vue组件,这节课我们学习给路由添加它的信息

1.添加name属性

咱们直接上代码,看得更清晰

const routes = [
  {
    path: '/',
    component: index,
    name: 'index', // 增加
  },
  {
    path: '/list',
    component: list,
    name: 'list', // 增加
  },
  {
    path: '/userDetail/:id',
    component: userDetail,
    name: 'userDetail', // 增加
  },
]

现在给每个路由增加了一个name属性,它其实就是一个单纯的字符串,表明了我们路由的内容,
后面使用路由、判断路由的时候都有用,所以养成一个好习惯

在定义新路由的时候,顺手给它加上一个唯一name属性

2.添加meta属性

const routes = [
  {
    path: '/',
    component: index,
    name: 'index', 
    meta: {       // 增加
        title: '首页',
        keepAlive: true
    }
  },
  {
    path: '/list',
    component: list,
    name: 'list', 
    meta: {       // 增加
        title: '用户列表',
        keepAlive: true
    }
  },
  {
    path: '/userDetail/:id',
    component: userDetail,
    name: 'userDetail', 
    meta: {       // 增加
        title: '用户详情',
        keepAlive: true
    }
  },
]

meta官网的文档叫做路由元数据,我们可以把它理解为关于路由的额外信息,它是一个对象,里面的内容随我们写什么都行,我这里写了两个可能会用到的
title表示我们这个页面的名称,
keepAlive表示这个页面要不要缓存,缓存页面在深入学习中肯定会遇到的

虽然现在这节课增加的这些信息现在没什么用,大家还是一定要了解name和meta这个两个属性,因为后面一定会用到。

上一篇下一篇

猜你喜欢

热点阅读