VUEの基本的な操作

基本的な操作のフロントエンド

• ページを達成ジャンプ

  this.$router.push({
      name:'HelloWorld',
  })

• タグジャンプ

  <router-link  :to="{path:'/login'}" ></router-link>

• 他のページをロードします

  <template>
      <div id='login'>
        用户名: <input type='text' v-model='name'>
          密  码：<input type='password' v-model='password'>
          <button @click="register">
              注册
          </button>
          <weibo></weibo>
      </div>
  </template>
  <script>
      import weibo from '@/components/Weibo'
      export default{
          name:"login",
          components:{
              "weibo":weibo
          },
          data(){
              return {
                  name:"",
                  password:""
              }
          },
          methods:{
              register:function(){
  
                  this.axios.post('/api/app01/user/',{"name":this.name,"password":this.password}).then(res=>{
                      if(res.data.status==200){
                          alert("注册成功");
                          // 将token写入本地
                          window.localStorage.setItem('token',res.data.token);
                          this.$router.push({
                              name:"home"
                          })
                      }
                  }).catch(error=>{
                      console.log(error)
                  })
              }
          }
      }
  </script>

• 各情報要求の前にヘッダを追加します。

  // 添加headers头信息
  this.axios.default.headers.common['token'] = ""

• データが書き込まれる方法/ localStorgeを読みます

  // 读取信息
  window.localStorage.getItem('localData');
  // 设置信息
  window.localStorage.setItem('localData','1234567')

• 外部CSSスタイルを参照する方法

  <style scoped>
    @import "../assets/main.css";
  </style>