vue 登录

先来学习下怎么搞个登录界面出来吧，百度那么多教程写的都是一堆东西，不简洁，一堆代码，对于新手一点不和谐。自己就慢慢摸索。其实也就只有一个重要知识点，叫导航守卫(https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#全局前置守卫)

1、首先建立起来一个项目，前面也已经说过了。

2、建立一个login.vue文件内容如下

<template>
  <div>
    <p>用户名：<input type="text" v-model="userName"/></p>
    <p>密码：<input type="text" v-model="passWord"/></p>
    <button @click="login">登录</button>
  </div>
</template>

<script>
// import axios from 'axios'

export default {
  name: 'login',
  data () {
    return {
      userName: '',
      passWord: ''
    }
  },
  methods: {
    login () {
      console.log('登录成功')
      // 页面进行跳转
      this.$router.push({path: '/user', params: {id: '123'}})
    }
  }
}
</script>

<style scoped>

</style>

3、建立一个user.vue文件，内容如下

<template>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
</template>

<script>
export default {
  name: 'user'
}
</script>

<style scoped>

</style>

4、然后建立两个路由地址

{
  path: '/login',
  name: 'login',
  component: login
},
{
  path: '/user',
  name: 'user',
  component: user,
  meta: {
    needLogin: true
  }
}

5、添加一个路由守卫，也就是路由过滤器。

router.beforeEach((to, from, next) => {
  if (to.meta.needLogin) {
    console.log('需要登录..')
    next('/login')
  } else {
    next()
  }
})

6、然后运行项目，http://localhost:8080/login，点击登录，在控制台出现“登录成功”和“需要登录...”，页面一点变化也没有，这其实是已经把user路径给拦截回去了，可以在浏览器输入http://localhost:8080/user，你会发现还是在login页面。注意步骤5中的蓝色字体，就是那一行代码用来跳转到登录页面。

在实际开发中，在login方法中保存用户的信息即可，在beforeach中判断是否存储有信息来控制是否跳转到登录页面

注：URL没有#是因为我在路由脚本里添加了mode:'history'，路径就不会出现#符号了。