“
最近在学习使用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.模块页面
2
index.html主页面
index.html主页面添加用于渲染匹配的组件,如下:
<div id="app"> <router-view></router-view></div>
3
main.js中设置路由
// 引入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')
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中定义,可使用this.xxx直接获取
· 此处引用了Bootstrap的样式,在index.html中添加
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
至此,我们初步创建了一个带路由的登录页面组件。
结束语
Vue中使用路由也折腾了一小会,不过Vue的debug信息写得很详细哦,对哪里出问题了有个比较清晰的了解呢。
原文作者:腾讯高级工程师 王贝珊
-前端好课-
最热前端框架,晋升加薪必修技能
多项目迭代式教学,低门槛快速进阶高级工程师
若需了解更多,请扫码添加小助手咨询~
也可直接查找微信号:TencentNext
▲ NEXT学院 官方课程助教 ▲
点击阅读原文,0元学习