# 项目拓展

# 1、token过期问题

见 登录注册模块==>8、关于 Token 过期问题

# 2、组件缓存

组件缓存的含义：组件一旦创建之后，将缓存起来，下一次再出现的时候不需要重新创建

用法：

<keep-alive>
	<组件/>
</keep-alive>

1
2
3

注意：因为组件被缓存了，所以下一次打开的时候不会执行beforeCreate,created,beforeMount,mounted四个钩子函数了，所以我们页面一打开就要做的事情最好不要放在这四个钩子里面！

activated:缓存的组件的打开时候触发

deactivated:缓存的组件关闭的时候触发

# 3、导航守卫

// 前置守卫
router.beforeEach((to, from, next) => {
  // 去的页面是否需要登录
  if (to.meta.needLogin) {
    // 需要登录
    if (store.state.user) {
      // 登录了，放行
      next()
    } else {
      // 未登录，非法进入，去登录页
      next('/login?url=' + to.path)
    }
  } else {
    // 不需要登录
    next()
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  {
    path: '/user/profile',
    name: 'user-profile',
    component: () => import('@/views/user-profile'),
    meta: { needLogin: true }  // 增加一个needLogin用于判断页码是否需要登录
  },

1
2
3
4
5
6

# 4、项目打包

思考是否要更换为线上的接口地址，其实早期可以考虑使用环境变量来定义接口地址

创建vue.config.js配置一些基础内容


const isPord = process.env.NODE_ENV === 'production'
module.exports = {
  publicPath: isPord ? './' : '/',  //处理 相对路径问题
   productionSourceMap: false  // 优化不要map文件
}

1
2
3
4
5
6
7

执行npm run build ，交出dist目录，跑路！
要不要考虑优化，那是看心情和需求！（一定要优化的话，做好代码备份！）