干货 | vue-router与创建登录组件

npm install vue-router --save

<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

// 定义组件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')

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

// 引入vue以及vue-routerimport 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')

<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>

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