import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import NewContact from '@/components/NewContact'//新添加，之后在下方的component: NewContact才会生效
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/newcontact',//和router-link to相呼应，导航到/newcontact
name: 'NewContact',
component: NewContact
}
]})
保存后打开页面可以看到如下：
之前的welcome变成了可点击的链接，点击后跳转看到如下页面
至此，已经我们已经把该引入的依赖，和路由的简单配置，简单组件的使用给完成了
接下来我们把精力都放到NewContact.vue这个组件，后面的代码几乎都在这个组件
打开NewContact.vue键入如下代码：
<template>
<el-row>
姓名：{{info.name}}
<el-input v-model="info.name" placeholder="请输入姓名"></el-input>
年龄：{{info.age}}
<el-input v-model="info.age" placeholder="请输入年龄"></el-input>
性别：{{info.sex}}
<el-select v-model="info.sex" placeholder="请选择">
<el-option v-for="item in options" :key="item" :value="item"></el-option><!-- 这里的key官方推荐在v-for时使用，不然会警告，但不影响使用 -->
</el-select>
</el-row>
</template>
<script>
export default {
name: "NewContact",
data(){
return {
info: {
name: '',
age: null,
sex: ''
},
options: [
'女','男','保密'
] }
}
}
</script>
<style></style>
<el-input v-model="info.name"></el-input>
el-input是element-ui的组件，以el-开头的是element-ui的组件
v-model这里的
v-model是Vue的指令，官方说法是——在表单控件或者组件上创建双向绑定。
="info.name"就是v-model绑定的数据，在data中return的内容里看到
info.name对应的是
''；
info.age对应的是
null
