2.Vue router与登陆功能

0.开始之前

vue2和vue-router3版本，vue3和vue-router4版本对应，这会省下很多麻烦的事情。
本次案例演示的是登录功能，其基本逻辑是如果用户登录了，就进入首页；若未登录，则跳转到登录页面。

1.vue router安装

由于我选择的vue版本是2，所以这里安装vue-router3。注意现在默认安装的版本是4，所以这里要指定版本3。

npm install vue-router@3

2.vue router配置

2.1 目录结构

在src目录下增加router文件夹，新增index.js和login.js文件，其中login.js是我们登陆模块的路由信息，index.js是公共的路由信息。
在src下新增view目录，这个目录存放各个页面（非组件）。如下图：

image.png

2.2 登陆功能关键代码片段：

# index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import loginRoutes from './login'

Vue.use(VueRouter)
const router = new VueRouter({
    routes: [...loginRoutes]
})
export default router

# login.js
const routes = [
  {
    path: "/login",
    component: () => import("../view/login/Login"),
  },
  {
    path: "/dashboard",
    component: () => import("../view/Dashboard"),
  },
];
export default routes;

# main.js
import Vue from 'vue'
import router from './router'
import App from './App.vue'
import './plugins/element.js'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

# App.vue
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      username: ''
    }
  },
  created() {
    let usernameSession = sessionStorage.getItem('username')
    if (!usernameSession) {
      this.$router.push({path: '/login'})
    } else {
      this.$router.push({path: '/dashboard'})
    }
  },
}
</script>

2.3 运行效果

image.png

点击登录后，sessionStorage就会记录username，再跳转到dashboard页面。有了这个demo，我们就可以继续学习研究更多的Vue知识点。