NPM：项目综合管理工具，类似与后端的maven
webpack：将es6打包成es5
第一个vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入vue.js-->
<script src='https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js'></script>
</head>
<body>
<div id="app">
{{msg}}<!--从绑定的vm模型中取出数据-->
</div>
<script>
var vm = new Vue({
el:"#app",/*绑定到具体哪一个id或者class上*/
data:{
msg:"hello,vue!"/*model层也就是数据*/
}
});
</script>
</body>
</html>
基本语法
v-bind（属性绑定）
vue不单止可以让html从model中取出数据，还可以让html标签在的属性拿到model层的数据。这就是v-bind。这种带v-xx的都是vue.js提供的指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入vue.js-->
<script src='https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js'></script>
</head>
<body>
<div id="app">
<!--通过v-bind绑定数据到title属性上-->
<span v-bind:title="msg">鼠标悬停查看title属性值</span>
</div>
<script>
var vm = new Vue({
el:"#app",/*绑定到具体哪一个id或者class上*/
data:{
msg:"hello,vue!"/*model层也就是数据*/
}
});
</script>
</body>
</html>
v-if 和 v-else（条件判断）
<!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">
<!--还可以判断是否等于某个值-->
<h1 v-if="ok">yes</h1><!--如果为true显示ok-->
<h1 v-else>no</h1><!--否则显示no-->
</div>
<script>
var vm = new Vue({
el: "#app",/*绑定到具体哪一个id或者class上*/
data: {
ok: true/*boolean值数据*/
}
});
</script>
</body>
</html>
<!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">
<ul>
<!--类似foreach循环in像是：-->
<li v-for="item in items">
{{item.msg}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",/*绑定到具体哪一个id或者class上*/
data: {
/*对象数组*/
items: [
/*对象里存放键值对*/
{msg: "123"},
{msg: "321"}
]
}
});
</script>
</body>
</html>
v-on（事件）
<!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">
<!--v-bind绑定数据到标签属性中-->
<!--v-on绑定函数到标签事件中-->
<button v-on:click="sayHello">点击弹出</button>
</div>
<script>
var vm = new Vue({
el: "#app",/*绑定到具体哪一个id或者class上*/
data: {
msg: "hello"
},
/*所有vm模型中的可能被调用的方法都在这里定义*/
methods: {
/*方法还是以键值对的性质定义，冒号右侧类似一个匿名函数*/
sayHello: function () {
alert(this.msg);
}
}
});
</script>
</body>
</html>
v-model（双向绑定）
v-model指令可以对表单控件实现双向绑定，也就是表单内容发生变化，model数据也跟着发生变化，model发生变化视图层内容也会更新，而且这种变化是实时进行的。
<!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="msg">{{msg}}
</div>
<script>
var vm = new Vue({
el: "#app",/*绑定到具体哪一个id或者class上*/
data: {
msg: ""
}
});
</script>
</body>
</html>
<!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">
<!--实现双向绑定-->
<p>
<input type="radio" name="sex" v-model="sex" value="男"> 男
<input type="radio" name="sex" v-model="sex" value="女"> 女
{{sex}}
</p>
<p>
<select v-model="select">
<option disabled value="">请选择</option>
<option value="A">a</option>
<option value="B">b</option>
<option value="C">c</option>
</select>
{{select}}
</p>
</div>
<script>
var vm = new Vue({
el: "#app",/*绑定到具体哪一个id或者class上*/
data: {
sex: "",
select: ""
}
});
</script>
</body>
</html>
Vue组件
<!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>
<!--这里被vm模型绑定了，是一个vue对象-->
<div id="app">
<!--自定义组件必须放在vue对象中-->
<!--使用组件名标签-->
<name v-for="item in items" v-bind:arg="item"></name>
<!--将遍历出来的item这个东西单向绑定到arg这个组件的props中，
这就类似与将遍历出来的东西绑定到我们html标签中的某个属性中，但是这个属性在我们的组件中是一种参数-->
</div>
<script>
/*定义一个vue组件component*/
/*第一个参数是组件名，后面的是组件内容*/
/*组件内容里面一律使用单引号*/
Vue.component("name", {
/*定义组件参数，因为参数不一定只有一个，所以使用[]数组的形式包裹起来（参数不要使用驼峰命名，使用xx-xx命名）*/
props: ['arg'],
template: '<li>{{arg}}</li>>'
});
var vm = new Vue({
el: "#app",
data: {
items:["java", "linux"]
}
});
</script>
</body>
</html>
Axios（vue中的异步通信）
axios使用es6语法，idea中需要将js语法设置成es6。加载ajax需要在钩子函数中加载，钩子函数是在vue生命周期中的某些阶段横插进去的一段方法。
第一种方式
<!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>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="vue">
<div>{{info}}</div>
</div>
<script>
var vm = new Vue({
el: "#vue",
/*这是拿到json数据的第一种方式*/
data: {
info: null
},
/*axios建议写在mounted里面*/
mounted(){//钩子函数
/*钩子函数是一种链式编程*/
/*axios发起get请求，然后es6语法创建一个响应函数，通过给model层的键值对赋值可以让视图层拿到数据*/
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>
<script src='https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js'></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="vue">
<div>{{info}}</div><!--拿到整个json字符串-->
<div>{{info.name}}</div><!--拿到具体的数据-->
</div>
<script>
var vm = new Vue({
el: "#vue",
/*第二种方式，这种方式和第一种方式一样，优点是可以防止数据污染*/
data() {
return{
info: {
/*这么写可以拿到json里具体的数据，不这么写也可以拿到，只不过写上面html取model层的值时候没有智能提示*/
name: null,
url: null,
page: null,
isNonProfit: null,
address: {
street: null,
city: null,
country: null,
},
links: [
{
name: null,
url: null
},
{
name: null,
url: null
},
{
name: null,
url: null
},
]
}
}
},
/*axios建议写在mounted里面*/
mounted(){//钩子函数
/*钩子函数是一种链式编程*/
/*axios发起get请求，然后es6语法创建一个响应函数，通过给model层的键值对赋值可以让视图层拿到数据*/
axios.get('data.json').then(response=>(this.info=response.data));
}
});
</script>
</body>
</html>
axios携带参数
<script>
/*axios建议写在mounted里面*/
mounted(){//钩子函数
/*钩子函数是一种链式编程*/
/*axios发起get请求，然后es6语法创建一个响应函数，通过给model层的键值对赋值可以让视图层拿到数据*/
/*通过headers携带参数*/
axios.get('data.json',{headers: {username: 'FELaoL3'}}).then(response=>(this.info=response.data));
}
});
</script>
vue闪烁问题
<head>
<style>
/*[]属性选择器解决闪烁问题*/
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="vue">
<div v-cloak>{{info}}</div><!--拿到整个json字符串-->
</div>
将josn数据绑定到属性
<a v-bind:href="info.url">点击跳转</a>
计算属性
计算属性就是为了把不经常改变的属性缓存起来，需要时直接从内存中调用，而不必每次都调用函数，以达到节省系统开销的目的。
<!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">
<p>currentTime1 {{currentTime1()}}</p>
<p>currentTime2 {{currentTime2}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello"
},
methods: {
currentTime1: function () {
return Date.now();//返回时间戳
}
},
computed: {//计算属性，methods和computed中的方法不能重名。重名只会调用methods中的那个
/*
计算属性是一种属性，只要页面不刷新，它调用一次过后的数据就会缓存在页面中，后续直接从缓存中取出
只有当函数体内的数据被刷新了，它才会重新计算。
*/
currentTime2: function () {
return Date.now();//返回时间戳
}
}
});
</script>
</body>
</html>
slot插槽
<!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">
<!--使用vue组件，整个组件的模板属性包含了插槽，所有要在标签内部写上组件来插入插槽-->
<todo>
<!--slot插槽属性指定该组件插入到哪一个插槽中-->
<todo-title slot="slot-title" :title="title"></todo-title>
<todo-items slot="slot-items" v-for="item in items" :item="item"></todo-items>
</todo>
</div>
<script>
/*vue组件，这是一个拥有插槽的组件*/
Vue.component("todo", {
/*slot标签就是插槽，这个标签在没有被插入的时候就是一个占位的作用，当这个插槽被组件插入，html代码层面插槽标签被组件替代，插槽消失*/
/*插槽需要一个name属性来被组件插入*/
template: '<div>\
<slot name="slot-title"></slot>\
<ul>\
<slot name="slot-items"></slot>\
</ul>\
</div>'
})
/*vue组件*/
Vue.component("todo-title", {
props: ['title'],
template: '<div>{{title}}</div>'
})
/*vue组件*/
Vue.component("todo-items", {
props: ['item'],
template: '<li>{{item}}</li>'
})
/*vm模型，此处只负责实例化vue对象和提供model层数据*/
var vm = new Vue({
el: "#app",
data: {
title: "书籍列表",
items: ["java", "linux"]
}
});
</script>
</body>
</html>
v-on和自定义事件
<!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">
<!--使用vue组件，整个组件的模板属性包含了插槽，所有要在标签内部写上组件来插入插槽-->
<todo>
<!--slot插槽属性指定该组件插入到哪一个插槽中-->
<todo-title slot="slot-title" :title="title"></todo-title>
<!--v-on:remove="remove"这里把一个自定义事件也就是remove绑定到vm叫做remove的函数上只要组件调用事件remove，vm上的remove就会被调用-->
<todo-items slot="slot-items" v-for="(item,index) in items" :index="index" :item="item" v-on:c-remove="Aremove"></todo-items>
</todo>
</div>
<script>
/*vue组件，这是一个拥有插槽的组件*/
Vue.component("todo", {
/*slot标签就是插槽，这个标签在没有被插入的时候就是一个占位的作用，当这个插槽被组件插入，html代码层面插槽标签被组件替代，插槽消失*/
/*插槽需要一个name属性来被组件插入*/
template: '<div>\
<slot name="slot-title"></slot>\
<ul>\
<slot name="slot-items"></slot>\
</ul>\
</div>'
})
/*vue组件*/
Vue.component("todo-title", {
props: ['title'],
template: '<div>{{title}}</div>'
})
/*vue组件*/
Vue.component("todo-items", {
props: ['item', 'index'],
/*点击事件绑定到我们写的组件函数中*/
template: '<li>{{item}}<button @click="remove">删除</button></li>',
methods: {
remove: function (index){
/*短横线命名*/
/*函数体通过一个名字调用一个外部的函数*/
this.$emit('c-remove');
/*第二种方式，直接调用vm函数,不需要自定义事件，需要传递index参数即可*/
// vm.remove(index);
}
}
})
var vm = new Vue({
el: "#app",
data: {
title: "书籍列表",
items: ["java", "linux"]
},
methods: {
Aremove: function (index) {
this.items.splice(index, 1);
}
}
});
</script>
</body>
</html>
第一个vue-cli
vue-cli就是一个脚手架，类似于我们的maven
- 统一目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
它需要环境支持
- node.js，安装包直接无脑下一步即可Node.js (nodejs.org)
- git
确认node.js安装完毕
node -v和npm -v能够正确显示版本即代表安装完毕
安装npm淘宝镜像
npm install cnpm -g全局安装淘宝镜像或者使用npm install --registry=https://registry.npm.taobao.org
淘宝镜像是一种备选，首选我们使用npm下载东西，只有当npm下载不了的时候，可以考虑使用淘宝镜像去下载，因为淘宝镜像下载的东西有可能在项目打包的时候会出现问题。
安装vue-cli
cnpm install vue-cli -g，使用vue list可以查看基于哪些模板创建vue程序
使用命令行创建第一个vue-cli
首先cd命令进入项目需要被创建的路径
然后执行vue init webpack 这里写项目名字
按照下列提示选择即可
project name：项目名字，初始化语句写过了，这里直接回车
project description：项目描述，直接回车
author：默认，直接回车
vue buid：vue编译方式，这里可以上下选择，我们直接选择第一个回车
剩下的都是选择no
初始化项目并运行
cd myvue #进入我们刚刚创建的vue程序
npm install #安装所有依赖环境，如果有报错，根据npm的提示进行修复即可
npm run dev #启动
显示如下页面代表启动成功
就可以访问localhost8080端口了
ctrl+C停止项目
接下来就可以通过idea里的终端来打开项目了
webpack
它是一个模块加载器兼打包工具，它能把各种资源当作模块来处理和使用。这里我们主要使用它来把我们vue的es6语法代码打包成浏览器支持的es5
npm install webpack -g和npm install webpack-cli -g安装webpack
webpack -v查看版本，由于我们生成的vue项目有指定webpack的版本号，但是这里安装的是最新的版本，可能会造成打包不成功，到时候需要将vue项目中指定的webpack版本号降低或者升高
使用
在指定路径创建一个新的文件夹，用idea打开它
项目根路径创建目录modules，然后新建hello。js和main。js
//向外部暴露一个方法
exports.sayHi= function () {
document.write("<h1>123</h1>")
};
/*导入一个js文件，类似于Java导入一个类*/
var hello = require("./hello");
/*这里可以调用这个js暴露出来的方法，类似java调用类方法*/
hello.sayHi();
项目根路径创建webpack配置文件webpack.config.js
/*打包*/
module.exports = {
/*指定程序入口*/
entry: './modules/main.js',
/*指定打包输出到哪里*/
output: {
/*一般惯用写法*/
filename: "./js/bundle.js"
//在终端使用webpack即可打包
//终端使用webpack --watch实时监听实现热部署，更新js就会重新打包
}
}
项目根路径创建项目入口index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--导入打包好的js文件-->
<script src="dist/js/bundle.js"></script>
</body>
</html>
vue-router路由
vue遵从Soc原则，只关注视图层，于是无法完成视图跳转的功能，vue-router专门被设计来完成视图跳转
安装
在idea项目中打开终端安装vue-router，npm install vue-router --save-dev这个意思是安装vue-router，并且把它保存到开发配置环境中
如果安装失败，安装低版本npm install vue-router@3.2.0 --save-dev，或者可能是npm版本问题，可以尝试npm install --legacy-peer-deps vue-router --save-dev
使用
1.在项目src目录下新建目录router
2.目录router下新建vue-router的配置文件index.js
/*router配置文件，习惯性命名为index*/
import Vue from 'vue';/*基于vue，必须导入*/
/*导入vue-router*/
import VueRouter from 'vue-router';
import Content from "../components/Content";
import Main from "../components/Main";
/*显示声明router*/
Vue.use(VueRouter);
/*配置导出路由*/
export default new VueRouter({
/*注意这里是routers，不是route*/
routes: [
{
//路由路径需要加上斜杠
path: '/content',
//路由名字
name: 'content',
//跳转到的组件
component: Content
},
{
path: '/main',
name: 'main',
component: Main
}
]
})
3.在程序入口中配置路由
import Vue from 'vue'
import App from './App'
import router from './router';/*因为我们的router配置文件使用index名字，这里只需要找到目录即可自动扫描配置文件*/
Vue.config.productionTip = false
new Vue({
el: '#app',
/*配置路由*/
router,
components: { App },
template: '<App/>'
})
4.在项目入口中配置路由
<template>
<div id="app">
<h1>123</h1>
<!--使用vue路由的跳转方式，弃用a标签-->
<router-link to="/main">首页</router-link>
<router-link to="/content">内容页</router-link>
<router-view></router-view><!--显示视图-->
</div>
</template>
<script>
/*导入组件*/
import Content from "./components/Content";
import Main from "./components/Main";
export default {
name: 'App',
/*在绑定的元素中显示声明组件*/
components: {
Content,
Main
}
}
</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>
Vue配合elementUI使用
初始化项目
首先，我们先使用webpack初始化一个vue项目vue init webpack hello-vue，然后cd进入这个目录
npm install vue-router@3.2.0 --save-dev #安装vue-router
npm i element-ui -S #安装elementUI
npm install #安装所有依赖
cnpm install sass-loader node-sass --save-dev #安装sass加载器
npm run dev #启动测试
测试正常之后就可以使用idea打开了
在src下新建两个目录router和views用来做路由和视图层组件
router目录下的路由配置index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Login from "../views/Login";
import Main from "../views/Main";
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{
path: '/main',
component: Main //注意这里是component，不是components
},
{
path: '/login',
component: Login
}
]
});
视图层组件login.vue
<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>
程序入口配置main.js
import Vue from 'vue'
import App from './App'
import router from './router';
//导入elementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';//这里导入css文件，css需要sass编译，所以前面导入了sass
Vue.config.productionTip = false
Vue.use(router);
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App) //使用elementUI
})
项目入口app.vue
<template>
<div id="app">
<!--路由显示页面-->
<router-view></router-view>
</div>
</template>
<script>
到这里直接运行，如果报错sass版本不兼容的话
sass不兼容
方式一：
查看自己的node版本，如果是16的版本，安装sass6版本
去修改package.json文件里的sass-loader版本为6.x，然后运行安装npm install 如果安装失败，使用cnpm安装
方式二：
狠一点，它不是说版本不兼容嘛，直接降级到它指定的低版本4.0.0
还是一样修改package.json文件里的sass-loader版本为4.0.0，然后运行npm install，报错运行cnpm install即可
路由嵌套
路由嵌套就是子路由
主页面main.vue
<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: #048bd1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
user目录下
<template>
<h1>用户列表</h1>
</template>
<script>
export default {
name: "UserList"
}
</script>
<style scoped>
</style>
在main路由中注册子路由
import Vue from "vue";
import VueRouter from "vue-router";
import Login from "../views/Login";
import Main from "../views/Main";
import UserList from '../views/user/List';
import UserProfile from "../views/user/Profile";
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{
path: '/main',
component: Main, //注意这里是component，不是components
//使用嵌套路由
children: [
{path: '/user/profile', component: UserProfile},
{path: '/user/list', component: UserList},
]
},
{
path: '/login',
component: Login
}
]
});
参数传递和重定向
参数传递
跳转设置
<!--to属性需要使用单向绑定 name到路由上的一个定义号的组件名字，带上参数params-->
<router-link :to="{name: 'UserProfile', params: {id: 1} }">个人信息</router-link>
路由设置
export default new VueRouter({
routes: [
{
path: '/main',
component: Main,
//使用嵌套路由
children: [
/*路由需要接收参数要，给这个路由命名，前端通过名字找到这个路由
* 路径需要带上/:参数名，这个参数名字要和前端传递的参数名字相同
* 设置props为true传递到组件的js中*/
{path: '/user/profile/:id', name: 'UserProfile', component: UserProfile, props: true},
{path: '/user/list', component: UserList},
]
},
{
path: '/login',
component: Login
}
]
});
组件设置
<template>
<div>
<!--取出js中的参数-->
{{id}}
</div>
</template>
<script>
export default {
/*从路由中接收参数*/
props: ['id'],
name: "UserProfile"
}
</script>
重定向
index.js
/*重定向设置*/
{
path: '/goHome',
redirect: '/main'
}
404和路由钩子
路由模式
hash模式：url会带上#/
history：url不显示#
在路由配置index.js中配置mode: ‘history’,
404
配置路由即可
/*路由会匹配上面的路径，匹配不到则会走这个配置的*路径*/
{
path: '*',
component: NotFound
}
路由钩子
beforeRouteEnter：进入路由前执行
beforeRouteLeave：离开路由前执行
export default {
/*从路由中接收参数*/
props: ['id'],
name: "UserProfile",
/*参数和filter过滤器类似，to相当于request，from相当于respond， next相当于chain*/
beforeRouteEnter: (to, from, next)=>{
alert("进入路由之前");
next();
},
beforeRouteLeave: (to, from, next)=>{
alert("离开路由之前");
next();
}
}
next还可以带上参数
next（’/path‘）改变路由跳转方向，使其跳转到其他路由
next（false）返回原来的页面
调用vm对象
next(vm=> {
vm.getData();
});
安装axios
npm install axios -s
npm install --save vue-axios
在static目录新建资源测试目录mock，创建数据测试文件data.json
导入axios，main.js
import Vue from 'vue'
import App from './App'
import router from './router';
import axios from "axios";
import VueAxios from 'vue-axios';
Vue.config.productionTip = false
/*注意注册顺序，必须是VueAxios, axios这样的顺序，否则会报错*/
Vue.use(VueAxios, axios)
Vue.use(router);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App) //使用elementUI
})
配置组件路由钩子
<template>
<div>
<h1>个人信息</h1>
<!--取出js中的参数-->
{{id}}
</div>
</template>
<script>
export default {
/*从路由中接收参数*/
props: ['id'],
name: "UserProfile",
/*参数和filter过滤器类似，to相当于request，from相当于respond， next相当于chain*/
beforeRouteEnter: (to, from, next)=>{
alert("进入路由之前");
next(vm => {
vm.getData();
});
},
beforeRouteLeave: (to, from, next)=>{
alert("离开路由之前");
next();
},
methods: {
getData: function () {
this.axios({
method: 'get',
url: 'http://localhost:8080/static/mock/data.json'
}).then(function (response) {
console.log(response);
})
}
}
}
</script>
<style scoped>
</style>