antdesignpro 重定向到登入頁面_幹貨 | vue-router與建立登入元件

最近在學習使用Vue作為前端的架構，本文記錄路由插件vue-router，以及搭建登入頁面的過程。

vue-router

在使用vue-router時，我們需要做的就是把路由映射到各個元件，vue-router會把各個元件渲染到正确的地方。

1安裝、起步 ·

安裝

npm install vue-router --save
           

·

起步

2基本用法 ·

HTML

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用指令 v-link 進行導航。-->
    <a v-link="{ path: '/foo' }">Go to Foo</a>
    <a v-link="{ path: '/bar' }">Go to Bar</a>
  </p>
  <!-- 路由外鍊 -->
  <router-view></router-view>
</div
           

·

Javascript

// 定義元件
var Foo = Vue.extend({
    template: '<p>This is foo!</p>'
})
var Bar = Vue.extend({
    template: '<p>This is bar!</p>'
})
// 路由器需要一個根元件。
// 出于示範的目的，這裡使用一個空的元件，直接使用 HTML 作為應用的模闆
var App = Vue.extend({})
// 建立一個路由器執行個體
// 建立執行個體時可以傳入配置參數進行定制，為保持簡單，這裡使用預設配置
var router = new VueRouter()
// 定義路由規則
// 每條路由規則應該映射到一個元件。這裡的“元件”可以是一個使用 Vue.extend
// 建立的元件構造函數，也可以是一個元件選項對象。
// 稍後我們會講解嵌套路由
router.map({
    '/foo': {
        component: Foo
    },
    '/bar': {
        component: Bar
    }
})
// 現在我們可以啟動應用了！
// 路由器會建立一個 App 執行個體，并且挂載到選擇符 #app 比對的元素上。
router.start(App, '#app')
           

以上均來自官方文檔，且提供了一個線上執行個體應用。

建立登入元件

1主要頁面邏輯

在這裡，本騷年就建一個比較簡單的項目。該項目與之前的Angular/React使用筆記項目長得完全一緻，我們這裡用Vue來實作吧。

我們的主要頁面邏輯如下：

·

1.登入頁面，輸入賬号和密碼即可

·

2.子產品頁面

2index.html首頁面

index.html首頁面添加用于渲染比對的元件，如下：

<div id="app">
  <router-view></router-view>
</div>
           

3main.js中設定路由

// 引入vue以及vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入元件
import Login from './components/Login.vue'
import Index from './components/Index.vue'
// 建立一個路由器執行個體
// 建立執行個體時可以傳入配置參數進行定制，為保持簡單，這裡使用預設配置
Vue.use(VueRouter)
var router = new VueRouter()
// 路由器需要一個根元件。
var App = Vue.extend({})
// 定義路由規則
// 每條路由規則應該映射到一個元件。這裡的“元件”可以是一個使用 Vue.extend
// 建立的元件構造函數，也可以是一個元件選項對象。
router.redirect({
  // 重定向任意未比對路徑到 /login
  '*': '/login'
})
router.map({
  '/login': {
    name: 'login', // 定義路由的名字。友善使用。
    component: Login // 引用的元件名稱，對應上面使用`import`導入的元件
  },
  '/index': {
    name: 'index',
    component: Index
  }
})
// 現在我們可以啟動應用了！
// 路由器會建立一個 App 執行個體，并且挂載到選擇符 #app 比對的元素上。
router.start(App, '#app')
           

4建立登入頁面 ·

首先我們在components檔案夾内添加一個Login.vue

<template>
 <div class="container" id="login">
  <form id="login-form">
    <h3 class="text-center">login</h3>
    <div class="form-group">
      <label>account</label>
      <!--v-model雙向綁定賬号-->
      <input type="text" class="form-control" placeholder="Account" v-model="username" required />
    </div>
    <div class="form-group">
      <label>Password</label>
      <!--v-model雙向綁定密碼-->
      <input type="password" class="form-control" placeholder="Password" v-model="password" required>
    </div>
    <button class="btn btn-default" v-on:click="submit">登入</button>
  </form>
</div>
</template>
<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  // 在 `methods` 對象中定義方法
  methods: {
    submit: function () {
      console.log('username: ' + this.username) //console中字元串需使用單引号''
      this.$route.router.go({name: 'index'}) //直接使用路由的名字進行跳轉
    }
  }
}
</script>
<style scoped>
#login {
  padding: 200px 20px;
  width: 730px;
}
#login > form {
  border: solid 1px #999;
  padding: 20px;
  border-radius: 5px;
}
</style>
           

·

使用v-model進行雙向綁定資料，資料在data中定義，可使用http://this.xxx直接擷取

·

此處引用了Bootstrap的樣式，在index.html中添加

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" target="_blank" rel="external nofollow" >
           

至此，我們初步建立了一個帶路由的登入頁面元件。

結束語

Vue中使用路由也折騰了一小會，不過Vue的debug資訊寫得很詳細哦，對哪裡出問題了有個比較清晰的了解呢。

原文作者：騰訊進階工程師 王貝珊