本文详细介绍了Vue.js的基础概念，包括Vue的七大对象、VUE基础语法、数据绑定、条件和循环、组件化以及Axios通信。通过实例演示了Vue的生命周期、计算属性、插槽和自定义组件的使用。此外，还讲解了Vue Router的安装、配置和使用，展示了如何实现路由嵌套和参数传递。最后，讨论了路由钩子与异步请求的结合，以及如何利用Axios进行数据交互。
笔记整理来源 B站UP主狂神说Java https://space.bilibili.com/95256449/
Vue入门
第一个Vue程序
1、Vue七大对象
- el属性
用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。 - data属性
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。 - template属性
用来设置模板，会替换页面元素，包括占位符。 - methods属性
放置页面中的业务逻辑，js方法一般都放置在methods中 - render属性
创建真正的Virtual Dom - computed属性
用来计算 - watch属性
watch:function(new,old){}
监听data中数据的变化
两个参数，一个返回新值，一个返回旧值，
2、VUE基础语法
1、基本数据获取
<!DOCTYPE html>
<html lang="en">
<head>。
<meta charset="UTF-8">
<title>Title</title>
//第一步：导入vue.js的cdn
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
<!--第三步：拿到数据-->
{{message}}
</div>
<script>
//第二步：创建一个vue对象,vue有七大属性
var vm = new Vue({
el: "#app", //绑定app
//Model 数据
data:{
message: "Hello Vue!"
}
});
</script>
</body>
</html>
我们这里在网页控制台操作实现vm双向绑定，实现动态改变，不用操作dom
vm.message="hello xiaoliu"
现在我们后端只需要采用restful风格拿到data即可！
2、v-bind绑定
v-xxx等被Vue称之为指令，v-bind是绑定指令
这里的v-bind是将title的message与我们data的messagge绑定使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>狂神说Java</p>
<div id="app">
<span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello,vue"
}
})
</script>
</html>
3、v-if v-else-if v-if
- v-if 表示条件成立则执行此标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--如果ok对象成立（=true）则显示Yes-->
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
ok: true
}
});
</script>
</body>
</html>
4、v-for
v-for里面的条件反着来 和我们java的foreach很像
v-for="list in lists"
{{text}} { "message": "1" }
{ "message": "2" }
{ "message": "3" }
{{text.message}}
1
2
3
<li v-for="(text,index) in allTexts">
{{text.message}}--{{index}} <!--数组下标一起显示-->
</li>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<li v-for="text in allTexts">
{{text}} <!--这种显示k-v键值对形式（对象）-->
{{text.message}} <!--这种显示对象中的属性-->
</li>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
allTexts: [
{message: "1"},
{message: "2"},
{message: "3"},
]
}
});
</script>
</body>
</html>
5、v-on
有事件就一定有方法
这里出现了我们vue的第三个属性 methods 这里有s 【重点】
方法必须定义在我们的methods对象中
当我们有不知道的事件时可以去jQuery中文文档找 https://www.jquery123.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="sayHi()">点我</button> <!--绑定我们的事件-->
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
message: "cqh"
},
methods: {
sayHi: function () {
alert(this.message);
}
}
});
</script>
</body>
</html>
6、数据双向绑定
bashv-model="message" 实际上是让该标签绑定了data里面的message，并且date中message的值取决于标签的value，而我们{{messagge}}实际上是取的我们data中的message
v-model="liu" 也是一样的绑定的我们data中的liu，并且liu的值取决于input中的value，而{{liu}}取的我们data中liu的值
注意：v-model会忽略所有元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源，你应该通过JavaScript在组件的data选项中声明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
数据双向绑定示例：<input type="text" v-model="message">{{message}}
性别：
<input type="radio" name="sex" value="男" v-model="liu">男
<input type="radio" name="sex" value="女" v-model="liu">女
选中了谁：{{liu}}
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
message: "",
liu: ''
},
});
</script>
</body>
</html>
下拉框原理都一样
disable 此选项不能被选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
下拉框：
<select v-model="selected">
<option value="" disabled>-请选择-</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>value:{{selected}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
selected: ""
}
})
</script>
</html>
Vue组件
- 直接上代码解释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<qinjiang v-for="item in items" v-bind:qin="item"></qinjiang>{{qin}}
<div v-for="item in items" v-bind:qin="item">{{qin}}</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
//定义一个Vue组件component
Vue.component("qinjiang",{
props: ['qin'], //接收参数
template: '<li>{{qin}}</li>' //定义模板
})
var vm = new Vue({
el: "#app",
data: {
items: ['Java','Python','Php'],
qin: "123"
}
})
</script>
</html>
这里的</qinjiang>就是模板<li>{{qin}}</li>
一定要有接收参数props
我们的v-bind将qin绑定到了item数据,我们组件模板的{{qin}}取的是我们组件中绑定的qin，而组件外的{{qin}}取的是data中的qin
只要是我们标签外的{{}}取值，都是从我们data中取
Axios通信
GitHub: https://github.com/ axios/axios
中文文档: http://www.axios-js.com/
Vue的生命周期官方文档: https://cn.vuejs.org/v2/guide/instance.html#
模拟Json数据
六个属性（对象）
{
"name": "weg",
"age": "18",
"sex": "男",
"url":"https://www.baidu.com",
"address": {
"street": "文苑路",
"city": "南京",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "https://www.bilibili.com"
},
{
"name": "baidu",
"url": "https://www.baidu.com"
},
{
"name": "cqh video",
"url": "https://www.4399.com"
}
]
}
初探axios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--v-cloak:解决闪烁问题 让其白屏-->
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!--view层 模板-->
<div id="vue" v-cloak>
<div>
{{info.name}}
</div>
<div>
{{info.address.city}}
</div>
<a v-bind:href="info.url">点我</a>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--导入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>
var vm = new Vue({
el: "#vue",
//data 属性 vm
//data() 方法
data(){
return{//这里的return就是去接收axios的请求，这里之所以为null，是因为return只是格式，并不是数据
//请求的返回参数格式，必须和json字符串一样
//info的对象可以不写，但是不要写错
info:{
name:null,
address:{
street:null,
city:null,
country:null
},
url:null
}
}
},
mounted(){ //钩子函数 链式编程 ES6新特性
//得到数据，然后响应
axios.get('../data.json').then(response=>(this.info=response.data));
}
})
</script>
</body>
</html>
计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
<!--currentTime() 调用方法-->
<p>currentTime {{currentTime()}}</p>
<!--currentTime1 调用方法-->
<p>currentTime {{currentTime1}}</p>
</div>
</body>
<!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
message:"Hello Vue"
},
methods:{
currentTime:function (){
return Date.now();//返回一个时间戳
}
},
computed:{//计算属性:methods,computed中的方法名不能重名,重名之后，只会调用methods的方法
currentTime1:function (){
return Date.now();//返回一个时间戳
}
}
})
</script>
</html>
插槽初体验slot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:name="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" v-bind:item1="item"></todo-items>
</todo>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
//slot 插槽 这个组件要定义在前面不然出不来数据
Vue.component("todo", {
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
<div>'
});
Vue.component("todo-title", {
//属性
props: ['name'],
template: '<div>{{name}}</div>'
});
Vue.component("todo-items", {
props: ['item1'],
template: '<li>{{item1}}</li>'
});
let vm = new Vue({
el: "#app",
data: {
//标题
title: "图书馆系列图书",
//列表
todoItems: ['三国演义', '红楼梦', '西游记', '水浒传']
}
});
</script>
</body>
</html>
自定义组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item1,index1) in todoItems"
v-bind:item="item1" v-bind:index="index1"
v-on:remove1="removeItems(index1)" ></todo-items>
</todo>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
//slot:插槽
Vue.component("todo",{
template: '<div>' +
'<slot name="todo-title"></slot>' +
'<ul>' +
'<slot name="todo-items"></slot>' +
'</ul>' +
'</div>'
});
Vue.component("todo-title",{
props: ['title'],
template: '<div>{{title}}</div>'
});
Vue.component("todo-items",{
props: ['item','index'],
//只能绑定当前组件的方法
template: '<li>{{index}}--------{{item}} <button @click="remove">删除</button></li> ',//v-on:的缩写 @
methods:{
remove:function (index){
//this.$emit（自定义事件名，参数） 自定义事件分发
this.$emit('remove1',index);
}
}
});
var vm = new Vue({
el:"#app",
data:{
title:"刘建宇",
todoItems:['狂说Java','狂说Java1','狂说Java2']
},
methods: {
removeItems:function (index){
console.log("删除了"+this.todoItems[index]+"OK")
this.todoItems.splice(index,1);//一次删除一个元素，删除当前index下的元素
}
}
});
</script>
</body>
</html>
当我们点击删除的时候，就会调用组件内部的方法remove，然后remove方法中采用事件分发给remove1，
而组件内部的v-on:remove1="removeItems(index1)" 将我们的remove1绑定到组件外的removeItems方法，
从而实现组件内部调用组件外部的方法进行删除操作
vue-cli
安装环境
需要的环境
Node.js : http://nodejs.cn/download/
确认nodejs安装成功:
- cmd 下输入 node -v,查看是否能够正确打印出版本号即可!
- cmd 下输入 npm -v,查看是否能够正确打印出版本号即可!
- 上面两个成功说明环境就OK了
这个npm,就是一个软件包管理工具,就和linux下的apt软件安装差不多!
npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。
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为该命令的缩写
安装 Node.js 淘宝镜像加速器（cnpm）
# -g 就是全局安装
npm install cnpm -g
# 若安装失败，则将源npm源换成淘宝镜像
# 因为npm安装插件是从国外服务器下载，受网络影响大
npm config set registry https://registry.npm.taobao.org
# 然后再执行
npm install cnpm -g
安装vue-cli
#在命令台输入
cnpm install vue-cli -g
#查看是否安装成功
vue list
第一个 vue-cli 应用程序
在我们项目路径下
# 这里的 myvue 是项目名称，可以根据自己的需求起名 注意在自己的项目路径下创建
vue init webpack myvue
- 我们初学这里一路都选择no即可，实际开发的时候这里一路yes就可以了会帮我们生成一些默认的东西;
- 初始化并运行
cd myvue
npm install
启动
//我们启动的文件路径一定是进入项目文件里面里面
npm run dev
// 如果启动失败，注意文件的路径
我们也可以在idea的Terminal里面运行，但是注意是管理员身份
Webpack
WebPack 是一款模块加载器兼打包工具，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。
在任何路径下执行都可以
npm install webpack -g
npm install webpack-cli -g
测试安装成功: 输入以下命令有版本号输出即为安装成功
webpack -v
webpack-cli -v
使用Webpack
- 先创建一个包 交由idea打开 会生成一个.idea文件 那么就说明该文件就交由idea负责
- 在idea中创建modules包，用于放置JS模块等资源文件，再创建hello.js,hello.js 暴露接口 相当于Java中的类
//第一步 暴露一个方法:sayHi
exports.sayHi = function () {
document.write("<h1>狂神说ES6</h1>>") //方法体
}
- 创建main.js 当作是js主入口 , main.js 请求hello.js 调用sayHi()方法
//第二步 引入方法
var hello1 = require("./hello");//请求此路径下的hello模块(其实就是hello.js)赋给hello1，相当于我们 hello1=new hello1
hello1.sayHi() //调用hello模块中的方法
-
在主目录创建webpack-config.js , webpack-config.js 这个相当于webpack的配置文件
enrty请求main.js的文件
output是输出的位置和名字
- entry：入口文件，指定webpack用哪个文件作为项目的入口
- output：输出，指定webpack把处理完成的文件放置到指定路径
- module：模块，用于处理各种类型的文件
- plugins：插件，如：热更新，代码重用等
- resovle：设置路径指向
- watch：监听，用于设置文件改动后直接打包
module.exports = { //导出这个模块
entry: './modules/main.js', //入口：当前目录下的modules下的main.js
output: { //输出：
filename: './js/bundle.js' //位置：当前目录下的js下的bundle.js
}
}
- 在idea命令台输入webpack命令（idea要设置管理员启动）（首先要进入我们的项目中）
- 注意：新版本要使用：webpack ./modoules/main.js -o ./dist/js/bundle.js 进行打包【我们这里采用这个】
- ./modoules/main.js 这里的main.js得是我们的引入模块的部分!!!
- 完成上述操作之后会在主目录生成一个dist文件 生成的js文件夹路径为/ dist/js/bundle.js
- 在主目录创建index.html 导入bundle.js
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--前端的模块化开发-->
<script src="dist/js/bundle.js/main.js"></script>
</body>
</html>
- 说明
x 参数 --watch用于监听 实时打包
webpack --watch
vue-router
1.项目路径下安装
npm install vue-router --save-dev
2.导入
import VueRouter from "vue-router";
3.使用
Vue.use(VueRouter);
我们的axios操作也一样
vue-router
是一个我们标准的前端化工程
vue-router demo实例
1． 将之前案例由vue-cli生成的案例用idea打开
2． 清理不用的东西 assert下的logo图片 component定义的helloworld组件 我们用自己定义的组件
3． 清理代码 以下为清理之后的代码 src下的App.vue 和main.js以及根目录的index.html
这三个是默认代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div id="app">
</div>
</body>
</html>
main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
new Vue({
el: '#app',
components: {App},
template: '<App/>'
})
App.vue
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
4.在components目录下创建一个自己的组件Content,Test,Main(这两个和Content内容一样的就不放示例代码了)【我们组件中export导出，要使用的时候在其他组件中import即可！！】
Content.vue
<template>
<h1>内容页</h1>
</template>
<script>
export default { //导出我们自己写的vue组件
name: "Content"
}
</script>
<!--scoped ：style作用域-->
<style scoped>
</style>
5.安装路由,在src目录下,新建一个文件夹 : router,专门存放路由
index.js(默认配置文件都是这个名字)【这里在我们安装vue-cli的时候选择yes，则会自动帮我们生成】
import Vue from 'vue';
import VueRouter from "vue-router"; //导入我们安装的vue-router
import Content from "../components/Content"; //导入我们自己写的vue组件
import Main from "../components/Main"; //导入我们自己写的vue组件
import liu from "../components/liu"; //导入我们自己写的vue组件
//安装路由 ，虽然我们导入了vue-router，但是要显示声明使用VueRouter
Vue.use(VueRouter);
//配置导出路由，为了让别人使用
export default new VueRouter({ //导出我们的对象
routes:[ //路由
{
path:'/content', //路由的路径 @RequestMapping
name:'content', //给我们的路由起名
component:Content //跳转的组件
},
{
path:'/main',
name:'main',
component:Main
},
{
path:'/liu',
name:'liu',
component:liu
}
]
});
6.在main.js中配置路由
main.js
import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描当前文件里面的路由配置
Vue.config.productionTip = false
new Vue({
router, //配置路由，才能使用
el: '#app',
components: { App },
template: '<App/>'
})
7.在App.vue中使用路由
App.vue
<template>
<div id="app">
<h1>Vue-Router</h1>
<router-link to="/main">首页</router-link> //<router-link>相当于我们原来的a标签 to就是herf
<router-link to="/content">内容页</router-link>
<router-link to="/liu">llll</router-link>
<router-view></router-view> //展示视图
</div>
</template>
<script>
//导入Content.vue
//1.import Content from './components/Content'
export default {
name: 'App'
//2. Comments:{
// Content
// }
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
总结
第一步 定义我们的组件
第二步 index.js 导入我们的路由（自己写的一些vue组件）,它相当于专注于路由的配置
第三步 main.js 配置使用我们的路由，它整个前端工程的一个入口
第四步 App.vue 使用路由
8.启动测试一下 ： npm run dev
9.效果图如下
vue+elementUI实战
elementUI官网 https://element.eleme.cn/#/zh-CN
根据之前创建vue-cli项目一样再来一遍 创建项目
1． 创建一个名为 hello-vue 的工程 vue init webpack hello-vue
2． 安装依赖，我们需要安装 vue-router、element-ui、sass-loader 和 node-sass 四个插件
# 进入工程目录
cd hello-vue
# 安装 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． 创建成功后用idea打开，并删除净东西 创建views和router文件夹用来存放视图和路由
4． 在views创建Main.vue
Main.vue
<template>
<h1>首页</h1> //定义内容
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
5． 在views中创建Login.vue视图组件
Login.vue（用的饿了么UI中的代码）
<template>
<div>
<el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号" prop="username">
<el-input type="text" placeholder="请输入账号" v-model="form.username"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="form.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
</el-form-item>
</el-form>
<el-dialog
title="温馨提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>请输入账号和密码</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
form: {
username: '',
password: ''
},
// 表单验证，需要在 el-form-item 元素中增加 prop 属性
rules: {
username: [
{required: true, message: '账号不可为空', trigger: 'blur'}
],
password: [
{required: true, message: '密码不可为空', trigger: 'blur'}
]
},
// 对话框显示和隐藏
dialogVisible: false
}
},
methods: {
onSubmit(formName) {
// 为表单绑定验证功能
this.$refs[formName].validate((valid) => {
if (valid) {
// 使用 vue-router 路由到指定页面，该方式称之为编程式导航
this.$router.push("/main");
} else {
this.dialogVisible = true;
return false;
}
});
}
}
}
</script>
<style lang="scss" scoped>
.login-box {
border: 1px solid #DCDFE6;
width: 350px;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px #909399;
}
.login-title {
text-align: center;
margin: 0 auto 40px auto;
color: #303133;
}
</style>
6． 创建路由,在 router 目录下创建一个名为 index.js 的 vue-router 路由配置文件
index.js
//导入vue
import Vue from 'vue';
import VueRouter from 'vue-router';
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";
//使用
Vue.use(VueRouter);
//导出
export default new VueRouter({
routes: [
{
//登录页
path: '/main',
component: Main
},
//首页
{
path: '/login',
component: Login
},
]
})
7． 在main.js中配置相关
main.js main.js是index.html调用的 所以基本上所有东西都导出到这
一定不要忘记扫描路由配置并将其用到new Vue中
import Vue from 'vue'
import App from './App'
import VueRouter from "vue-router";
//扫描路由配置
import router from "./router"
import ElementUI from "element-ui" //导入elementUI
import 'element-ui/lib/theme-chalk/index.css' //导入element css
//使用
Vue.use(VueRouter)
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
render: h => h(App), //ElementUI规定这样使用
})
8． 在App.vue中配置显示视图
App.vue
<template>
<div id="app">
<!--展示视图-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
到这里我们可能会遇到错误： Module build failed: TypeError: this.getOptions is not a function
原因是我们的sass-loader版本过高 要去package.json改为低版本
然后重新执行npm install 即可！！！
或者直接卸载重新安装
npm uninstall node-sass 卸载
npm install node-sass@4.14.1 安装低版本
npm run dev 运行
9． 最后效果
路由嵌套
嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。相当于局部变化
1、创建src/views/user/ Profile.vue
<template>
<h1>个人信息</h1>
</template>
<script>
export default {
name: "UserProfile" //这里导出什么名字，别人引用什么名字即可！
}
</script>
<style scoped>
</style>
2、创建src/views/user/ List.vue
<template>
<h1>用户列表</h1>
</template>
<script>
export default {
name: "UserList"
}
</script>
<style scoped>
</style>
3、修改我们的Main.vue，这里采用了ElementUI
<template>
<div>
<el-container>
<el-aside width="200px">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
<el-menu-item-group>
<el-menu-item index="1-1">
//插入的地方
<router-link to="/user/profile">个人信息</router-link>
</el-menu-item>
<el-menu-item index="1-2">
//插入的地方
<router-link to="/user/list">用户列表</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
<el-menu-item-group>
<el-menu-item index="2-1">分类管理</el-menu-item>
<el-menu-item index="2-2">内容列表</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-main>
//在这里展示视图
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped lang="scss">
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
4、index.js
//导入vue
import Vue from 'vue';
import VueRouter 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"; //导入子模块
//使用
Vue.use(VueRouter);
//导出
export default new VueRouter({
routes: [
{
//首页
path: '/main',
component: Main,
children: [ // 嵌套路由 写入子模块
{
path: '/user/profile',
component: UserProfile,
}, {
path: '/user/list',
component: UserList,
},
]
},
//登录页
{
path: '/login',
component: Login
},
]
})
5、 路由嵌套实战效果图
参数传递
第一种
1、 修改路由配置, 主要是router下的index.js中的 path 属性中增加了 :id 这样的占位符
{
path: '/user/profile/:id', //增加参数，类似于restful
name:'UserProfile',
component: UserProfile
}
2、传递参数Main.vue
name是组件的名字，这个组件名是index.js中的组件名，不是组件内部的名字 params是传的参数 如果要传参数的话就需要用v:bind:来绑定
传递一个参数
<router-link v-bind:to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
3、Profile.vue
<template>
<!-- 所有的元素必须在根节点下-->
<div>
<h1>个人信息</h1>
{{$route.params.id}} //取出参数，必须套在节点下 因为template只能有一个子标签
</div>
</template>
第二种 props 减少耦合
1、index.js
{
path: '/user/profile/:id',
name:'UserProfile',
component: UserProfile,
props: true //添加一个props: true，使它支持传递参数的这种方式
}
2、Main.vue
这里不变
<router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
3、目标组件增加 props 属性
Profile.vue
<template>
<div>
个人信息
{{ id }} //直接获取参数
</div>
</template>
<script>
export default {
props: ['id'], //引用接收参数
name: "UserProfile"
}
</script>
<style scoped>
</style>
传递用户名
1.Login.vue
this.$router.push("/main/"+this.form.username); //登录的时候携带用户名
2.index.js
{
path: '/main/:name', //参数传递
name: 'main',
component: Main,
props: true, //开启接收
}
3.Main.vue
export default {
props: ['name'], //接收参数
name: "Main"
}
<span>{{name}}</span> //使用参数
组件重定向
定向的意思大家都明白，把一个页面跳到别外一个页面上去
1、index.js
{
path: '/main',
name: 'Main',
component: Main
},
{
path: '/goHome',
redirect: '/main' //当我们请求/goHome的时候，会重定向到/main请求
}
2、Main.vue
<el-menu-item index="1-3">
<router-link to="/goHome">回到首页</router-link>
</el-menu-item>
路由模式与 404
路由模式有两种
- hash ：路径带 # 符号， 如 http://localhost/#/login
- history：路径不带 # 符号，如 http://localhost/login
index.js
export default new Router({
mode: 'history', //去掉路径中的#
routes: [
]
});
404
1、创建src/views/NotFound.vue
<template>
<div>
<h1>404,你的页面走丢了</h1>
</div>
</template>
<script>
export default {
name: "NotFound"
}
</script>
<style scoped>
</style>
2、index.js
import NotFound from '../views/NotFound'
{
path: '*', //所有的请求，能匹配到的请求就走我们自己的请求
component: NotFound
}
3、效果图
路由钩子与异步请求
Profile.vue
beforeRouteEnter：在进入路由前执行
beforeRouteLeave：在离开路由前执行
export default {
name: "UserProfile",
beforeRouteEnter: (to, from, next) => { //在进入路由前执行，这个就跟我们的过滤器一样，三个参数是固定的
console.log("准备进入个人信息页");
next(); //执行下一个，不然会卡住
},
beforeRouteLeave: (to, from, next) => { //在离开路由前执行，
console.log("准备离开个人信息页");
next();
}
}
参数说明：
- to：路由将要跳转的路径信息
- from：路径跳转前的路径信息
- next：路由的控制参数
- next() 跳入下一个页面
- next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
- next(false) 返回原来的页面
- next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例
在钩子函数中使用异步请求
1、安装 Axios
中文文档 http://www.axios-js.com/zh-cn/docs/
cnpm install --save vue-axios
npm install --save axios
2、main.js引用 Axios
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
3、准备数据 ： 只有我们的 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下。
// 静态数据存放的位置
static/mock/data.json //mock 测试数据
4、在 beforeRouteEnter 中进行异步请求
Profile.vue
export default {
name: "UserProfile",
//钩子函数 过滤器
beforeRouteEnter: (to, from, next) => {
//加载数据
console.log("进入路由之前")
next(vm => { //使用vm实例，加载数据
vm.getData() //进入路由之前执行getData方法
});
},
beforeRouteLeave: (to, from, next) => {
console.log("离开路由之前")
next();
},
methods: { //axios
getData: function () {
this.axios({ //这是一个axios方法
method: 'get', //get方式去请求
url: 'http://localhost:8080/static/mock/data.json' //去url请求
}).then(function (response) { //得到响应
console.log(response)
})
}
}
}
5、路由钩子和axios结合图
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
