By
被删
更新日期:
最近在学习使用Vue作为前端的框架,《Vue使用笔记》系列用于记录过程中的一些使用和解决方法。
本文记录路由插件vue-router,以及搭建登录页面的过程。
vue-router
在使用vue-router时,我们需要做的就是把路由映射到各个组件,vue-router会把各个组件渲染到正确的地方。
安装、起步
1
| npm install vue-router --save
|
基本用法
1 2 3 4 5 6 7 8 9 10
| <div id="app"> <h1>Hello App!</h1> <p> <a v-link="{ path: '/foo' }">Go to Foo</a> <a v-link="{ path: '/bar' }">Go to Bar</a> </p> <router-view></router-view> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
| var Foo = Vue.extend({ template: '<p>This is foo!</p>' }) var Bar = Vue.extend({ template: '<p>This is bar!</p>' })
var App = Vue.extend({})
var router = new VueRouter()
router.map({ '/foo': { component: Foo }, '/bar': { component: Bar } })
router.start(App, '#app')
|
以上均来自官方文档,且提供了一个在线实例应用。
这里我们主要介绍将会涉及的一些基本资料,有关路由的嵌套、对象等等更多的请查看官方文档。
创建登录组件
主要页面逻辑
在这里,本骚年就建一个比较简单的项目。该项目与之前的Angular/React使用笔记项目长得完全一致,我们这里用Vue来实现吧。
index.html主页面
index.html主页面添加用于渲染匹配的组件,如下:
1 2 3
| <div id="app"> <router-view></router-view> </div>
|
main.js中设置路由
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| 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({})
router.redirect({ '*': '/login' }) router.map({ '/login': { name: 'login', component: Login }, '/index': { name: 'index', component: Index } })
router.start(App, '#app')
|
创建登录页面
- 首先我们在components文件夹内添加一个Login.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
| <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>
|
1
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
|
至此,我们初步创建了一个带路由的登录页面组件。
参考
《http://guowenfh.github.io/2016/03/28/vue-webpack-06-router/》
vue-router官方文档
结束语
Vue中使用路由也折腾了一小会,不过vue的debug信息写得很详细哦,对哪里出问题了有个比较清晰的了解呢。
此处查看项目代码
此处查看页面效果
查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢
如果你想要关注日常生活中的我,欢迎关注“牧羊的猪”公众号噢