基于Nuxt.js开发一个Vue程序，实现登录和注册切换。

全局安装create-nuxt-app

npm install create-nuxt-app -g

创建项目名为my-nuxt-demo

create-nuxt-app my-nuxt-demo

1. JavaScrip
2. Npm
3. None
4. Axios
5. ESLint
6. None
7. SSR
8. Server
9. jsconfig.json
10. github name
11. git
    

成功后运行

cd .\my-nuxt-demo\

npm run dev

浏览器访问

http://localhost:3000/

实现功能

在pages下创建login.vue 和 register.vue

1. login.vue

<template>
  <div>
    <form class="Container">
      <div>用户名:</div>
      <input type="text" v-model="name">
      <div>密码:</div>
      <input type="password" v-model="password">
      <div></div>
      <button @click="summit">登录</button>
      <button @click="jumpTo">注册</button>
      <nuxt-link to="/register">注册</nuxt-link>
    </form>
  </div>
</template>

<script>
export default {
  methods: {
    jumpTo () {
      this.$router.push('/register')
    },
    summit(){
      alert("登录成功！")
    }
  }
}
</script>

2. register.vue

<template>
  <div>
    <form class="Container">
      <div>用户名:</div>
      <input type="text" v-model="name">
      <div>密码:</div>
      <input type="password" v-model="password1">
      <div>再次确认密码:</div>
      <input type="password" v-model="password2">
      <div></div>
      <button @click="summit">注册</button>
      <button @click="jumpTos">取消</button>
    </form>
  </div>
</template>

<script>
  export default {
    methods: {
      jumpTos () {
        this.$router.push('/login')
      },
      summit(){
        alert("注册成功！")
      }
    }
  }
</script>

在layouts下创建全局样式
default.vue

<template>
  <div>
    <nuxt />
  </div>
</template>

<style>
.Container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 15px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
</style>

注意事项

1. 路由
   Nuxt.js提供了非常方便的自动路由机制，当它检测到pages目录下的文件发生变更时，会自动更新.muxt\router.js下的路由。这也是我们为什么不用配置路由的原因。

2. 跳转页面
   Nuxt 提供了两种路由跳转方式

1.1 声明式跳转

如代码中的：<nuxt-link to="/register">注册</nuxt-link>

2.2 编程式跳转

<button @click="jumpTo">注册</button>

    methods: {
      jumpTos () {
        this.$router.push('/login')
      }
   }

推荐使用nuxt-link，跳转页面，更利于seo收录，使用this.$router.push跳转相同路由存在一些问题。

效果图