十五、elementUI
- 1.创建一个名为xxxx的工程，vue init webpack xxxx
- 2.安装依赖
# 解压压缩包 # 进入目录 cd xxxx # 安装依赖 vue-router npm install vue-router --save-dev #安装element-ui npm i element-ui -S #安装依赖 npm install #安装SASS加载器 cnpm install sass-loader node-sass --save-dev #启动测试 npm run dev
3.npm命令解释
npm install moduleName:安装模块到项目目录下 npm install -g moduleName:-g的意思是将模块安装到全局，具体安装到磁盘那个位置，要看npm config prefix的位置 npm install -save moduleName:--save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写 npm install -save-dev moduleName:--save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写
4.页面参考上面的vue-router路由
十六、路由嵌套
- 路由嵌套
children:[ { path:'', compnent: } ]
页面还是按照上面的vue-router路由
十七、参数传递和重定向
1.参数传递
1.前端传
params接收参数 v-bind绑定事件 <router-link :to="{name:'路径',params:{参数} }"></router-link>
2.中间index.js接收，path:’路径/.参数’
3.用户展示
所有的元素必须在根节点下（必须在标签中） { {$router.params.参数} }
通过props:true解耦
/*修改 1 在component中加上props:true 2 将{ {$router.params.参数} }改为{ {参数名} }，在组件中接收参数 如： */ exprot default{ props:['参数'], ... }
2.重定向
在index.js中的routes:[ { path:'/goHome', redirect:''//重定向的路径 } ] 加一个导航栏 将路径改为'/goHome'
十八、404和路由钩子
1.404
路由模式有两种：
hash：路径带 # 符号，如 http://localhost/#/login history：路径不带 # 符号，如 http://localhost/login 修改路由配置，代码如下： export default new Router({ mode: 'history', routes: [ ] });
处理 404 创建一个名为 NotFound.vue 的视图组件，代码如下：
<template> <div> 页面不存在，请重试！ </div> </template> <script> export default { name: "NotFount" } </script> <style scoped> </style>
修改路由配置，代码如下：
import NotFound from '../components/NotFound' { path: '*', component: NotFound }
2.路由钩子和异步请求
// beforeRouterEnter:在进入路由钱执行 // beforeRouterLeave:在离开路由前执行 export default{ props:['id'], name:"UserProfile", beforeRouterEnter:(to,from,next)=>{ console.log("准备进入个人信息页"); next(); }, beforeRouterLeave:(to,from,next)=>{ console.log("准备离开个人信息页"); next(); }, }
参数说明：
to:路由将要跳转的路径信息
from：路由跳转前的路径信息
next：路由的控制参数
next()跳入下一个页面
next(‘/path’)改变路由的跳转方向，将其跳入另一个路由
next(false)返回原来的页面
next((vm)=>{})仅在beforeRouterEnter中可用，vm是组件实例
在钩子函数中使用异步请求
1.安装Axios cnpm install axios -s
2.main.js引用Axios
import axios from ‘axios’
Vue.prototype.axios = axios;
3.准备数据：只有我们的static目录下的文件是可以被访问到的，所以把静态文件放入该目录下
//静态数据存放的位置
static/mock/data.json
4.在beforeRouterEnter中进行异步请求
后记
Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~
