一、准备工作
1、创建一个vue-cli程序
之前的博客有。各位看官姥爷，可以自查。
2、安装elementui
在创建vue-cli程序的过程中，需要在控制台执行以下指令：
#安装 element-ui npm i element-ui -s #安装 sass 加载器 cnpm install sass-loader node-sass --save-dev
3、准别好的login.vue和main.vue页面
这个是提前准备好的两个login.vue和main.vue页面。
login.vue页面：
欢迎登录
登录 请输入账号和密码
main.vue页面：
用户管理 个人信息 用户列表 回到kb88凯时d88尊龙官网手机app官网登录首页 内容管理 分类管理 内容列表 系统管理 页面设置 用户设置 {{name}} 个人信息 退出登录
这两个页面中已经写了一些代码，主要的流程是用户在login.vue页面输入账号和密码，只要不为空，就会跳转到main.vue页面，而在main.vue页面中，有两个子导航栏，点击该导航栏就会跳转到对应子路由的子组件中。
4、main.js下的两个页面list.vue和profile.vue
list.vue页面：
用户列表
profile.vue页面：
个人信息
{{ id}}
二、创建路由
代码如下：
ps:注意main组件下的children属性是嵌套路由，表示在我们的main.vue中有两个路由的跳转，跳转时，可以先找到main再找到对应的子组件的跳转路由。
import vue from "vue"
import router from 'vue-router'
import main from "../views/main";
import login from "../views/login";
import userlist from "../views/user/list";
import userprofile from "../views/user/profile";
import notfound from "../views/notfound";
vue.use(router);
export default new router({
mode:"history",
routes:[
{
path:'/login',//嵌套路由
component: login,
},{
path: '/main/:name',
component: main,
props:true,
children:[
{
path:'/user/profile/:id',
name:'userprofile',//注意名字是字符串
props:true,
component:userprofile
},{
path:'/user/list',
component:userlist
},{
path:'/gohome',
redirect:'/main'
}
]
},{
path:'*',
component:notfound,
}
]
});
设置main.js,将elementui和router引入，代码如下：
import vue from 'vue'
import app from './app'
import router from './router'
import elementui from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios';
import vueaxios from 'vue-axios'
//先router在axios不然识别不到axios
vue.use(router);
vue.use(vueaxios,axios);//这个顺序也不能变
vue.use(elementui);
new vue({
el: '#app',
router,
render: h => h(app)//elementuid88尊龙官网手机app官网的配置
})
三、页面跳转
其实现在已经可以实现页面跳转了，当我们“登录”跳转“d88尊龙官网手机app主页面”，点解左右导航栏显示不同信息。
如下所示：
其实到这里对于页面之间的简单跳转就差不多了，对于我们后端学前端的人员来说，最重要的就还剩数据的请求然后再在页面显示即可。
四、数据请求
我们以profile.vue页码为例，当用户点击该导航栏时，实现数据的请求，看能否通过接口拿到我们先要的数据呢？
首先我们写一个静态数据测一下，因为还未写后端代码。
{
"name":"lfy",
"url": "http://baidu.com",
"page": "1",
"isnonprofit":"true",
"address": {
"street": "含光门",
"city":"陕西西安",
"country": "中国"
},
"links": [
{
"name": "b站",
"url": "https://www.bilibili.com/"
},
{
"name": "4399",
"url": "https://www.4399.com/"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
我们在proflie.vue实例中，有beforerouteenter（）、beforerouteleave（）两个函数分别是进入路由之前和离开路由之后，我们可以在这两个函数之内进行数据的请求，只有请求的方式用的是之前学的axios来请求。
具体代码如下：
效果显示：
如图所示当我们点击导航栏的时候就可以完成数据的请求，后面只需要通过之前博客写的关于vue的事件进行取值，和elementui的一些样式进行数据渲染即可。
五、总结
到这里关于vue的一些基本知识就学习的差不多了，接下来博主正在做一个springboot vue的项目，后面会将我们学习的内容用到项目中去，也会写相应的博客与大家分享技术。
