个人向-Vue快速入门
一、介绍
-
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层(HTML+CSS+JS),不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。(官方介绍)
-
Vue是中国人尤雨溪开发的
-
前端除了视图层还有网络通信(一般用axios),还有页面跳转(vue-router),状态管理(vuex)
相关原则:
- Soc:(Separation of concerns)Soc原则:关注点分离原则 是计算前端用到的一条最基本的原则。Vue当然也遵守
- MVVM :Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。
MVVM:
Model-View-ViewModel —— 事件驱动编程方式(主要目的是分离视图和模型)
ViewModel双向绑定层 :ViewModel所封装出来的数据模型包括视图的状态和行为两部分,model层数据模型只包含状态。
二、初入(基本使用语法)
一般直接在html中引入Vue就可以直接使用了
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script><!--或者下面的也行-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
1.初入
使用基本html格式,代码只有<body>部分
<body>
<!--view层 模板-->
<div id="app">
{
{
message}}//从data中取数据
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
//Model:数据
data:{
message:"hello,vue!"
}
});
</script>
2.v-bind
<!--view层 模板-->
<div id="app">
<span v-bind:title="message">
鼠标悬停查看动态绑定的信息
</span>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
//Model:数据
data:{
message:"hello,vue!"
}
});
</script>
3.判断循环
判断:
<!--view层 模板-->
<div id="app">
<h1 v-if="ok">True</h1>
<h1 v-else>No</h1>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
//Model:数据
data:{
ok:true
}
});
</script>
循环:
<!--view层 模板-->
<div id="app">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else-if="type==='C'">C</h1>
<h1 v-else>D</h1>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
//Model:数据
data:{
type:'A'
}
});
</script>
4.事件绑定
<!--view层 模板-->
<div id="app">
<button v-on:click="sayHi">click here</button>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
//Model:数据
data: {
message:"大海"
},
methods:{
//
//方法必须定义在Vue的Method对象种
sayHi:function (){
alert(this.message)
}
}
});
</script>
5.数据双向绑定
这里给两个例子
<!--view层 模板-->
<div id="app">
性别:
<input type="radio" name="sex" value="男" v-model="person" />男
<input type="radio" name="sex" value="女" v-model="person" />女
<p>
选中了:{
{
person}}
</p>
<br />
输入的文本:<textarea v-model="message" ></textarea>{
{
message}}
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
//Model:数据
data:{
message:"",
person:''
}
});
</script>
下拉框的双向绑定:
<!--view层 模板-->
<div id="app">
下拉框:
<select name="" id="" v-model="selected">
<option value="" disabled>---请选择---</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<span>value:{
{
selected}}</span>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
//Model:数据
data:{
selected:''
}
});
</script>
6.vue组件
组件是可复用的Vue实例,(可重复使用的模板)
<!--
“绑定item的值”也是一个变量,命名为item_bind什么的也行,这里只是方便区别
-->
<!--view层 模板-->
<div id="app">
<!--组件:传递给组件中的值:props-->
<person v-for="item in items" v-bind:绑定item的值="item"></person>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
//定义一个Vue组件component
Vue.component("person",{
props:["绑定item的值"],
template:'<li>{
{绑定item的值}}</li>'
});
var vm=new Vue({
el:"#app",
//Model:数据
data:{
items:["java","linux","mac"]
}
});
</script>
7.axios异步通信
Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,她的主要作用就是实现 AJAX 异步通信。
需要引入script:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
新建data.json文件
{
"name": "java",
"url": "https://www.baidu.com/",
"page": 1,
"isNonProfit": true,
"address": {
"street": "含光门",
"city": "陕西西安",
"country": "中国"
},
"links": [
{
"name": "B站",
"url": "https://www.bilibili.com/"
},
{
"name": "csdn",
"url": "https://www.csdn.net/"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!--view层 模板-->
<!--
ps:这里打开网页会闪烁: {
{
message.name}}------------》java 加载
手动解决:
<style>
[v-cloak]{
display: none;
}
</style>
打开网页 白屏------------》java 加载
-->
<div id="vue" v-cloak>
<div>{
{
message.name}}</div>
<div>{
{
message.address.city}}</div>
<a v-bind:href="message.url">百度</a>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm=new Vue({
el:"#vue",
data(){
return{
message:{
/*这里直接 message:'' 不写也可以 */
name:null,
city:null,
address:{
street:null,
city:null,
country:null
}
}
}
},
mounted(){
//钩子函数 链式编程
axios.get('./data.json').then(response=>(this.message=response.data));
}
});
</script>
</body>
</html>
8.计算属性
<!--view层 模板-->
<div id="app">
<!--
currentTime1():是方法,在网页中console.log中调用 vm.currentTime1() 会显示不同的值
currentTime2:是属性 在网页中console.log中调用 vm.currentTime2() 会报错,因为它不是方法,重复调用vm.currentTime2值不会变化
因为currentTime2是属性,计算出来后保存到了内存中 ,和缓存类似,如果 currentTime2内属性值变化 例如:在网页控制台中输入:vm.message="3", currentTime2
会重新计算
-->
<!--
计算属性的主要特征就是为了将不经常变化的计算结果进行缓存,以节约我们的习题开销
-->
<P>currentTime1:{
{
currentTime1()}}</P>
<P>currentTime2:{
{
currentTime2}}</P>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello,world"
},
methods:{
currentTime1:function (){
return Date.now(); //返回当前一个时间戳
}
},
computed:{
// 计算属性: methods. computed 方法不能重名 vm.currentTime2 is not a function currentTime2是属性
currentTime2:function (){
this.message;
return Date.now(); //返回当前一个时间戳
}
}
});
</script>
9.插槽slot
<!--view层 模板-->
<div id="app">
<!--
网页输出:
<p>列表数据</p>
<ul>
<li>鲁迅</li>
<li>周树人</li>
<li>狂人</li>
</ul>
-->
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in names" :item="item"></todo-items>
</todo>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 style="color: blue">{
{title}}</div>'
});
Vue.component("todo-items",{
props:['item'],
template: '<li>{
{item}}</li>'
});
var vm=new Vue({
//Vue有先后顺序,这个要放到最后,不然会报错
el:"#app",
//Model:数据
data:{
title:"列表",
names:['鲁迅','周树人','狂人']
}
});
</script>
10.自定义事件 内容分发
<!--view层 模板-->
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in names" :item="item"
v-bind:绑定index的值="index" v-on:绑定remove方法="removeItems(index)"></todo-items>
</todo>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 style="color: blue">{
{title}}</div>'
});
Vue.component("todo-items",{
props:['item','绑定index的值'],
//只能绑定当前组件的方法
template: '<li>{
{绑定index的值}}--{
{item}} <button @click="remove">删除</button></li>',
methods:{
remove:function (绑定index的值){
//this.$emit() 自定义事件分发
this.$emit('绑定remove方法',绑定index的值)
}
}
});
var vm=new Vue({
//据说Vue又先后顺序,这个要放到最后,不然会报错?? 未验证
el:"#app",
//Model:数据
data:{
title:"列表",
names:['鲁迅','周树人','狂人']
},
methods: {
removeItems:function (index){
this.names.splice(index,1); //一次删除下标为index的一个元素
}
}
});
</script>
三、Vue-cli(vue脚手架)
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统
全局安装vue-cli:
npm install -g vue-cli
不行用cnpm install -g vue-cli
查看版本:vue -V
1.初始化
新建空文件夹,空文件夹位置打开cmd输入:
vue init webpack myvue
不行的需要用管理员打开cmd
细节:
vue init webpack myvue(文件名)
加载后cmd会显示项目基本信息,选项依次可填:默认 默认 作者名 第一个选项(standalone) no no no no no,i
然后就会生成一个myvue的项目,cmd切换到/myvue文件夹内
终端输入:
npm run dev
网页打开 http://localhost:8080,空的vue-cli运行成功
2.idea 安装 Vue 插件没有Vue component选项
这里可以用idea开发Vue,直接下载Vue.js插件即可。
如果下载后,新建中没有component选项的解决方案:
- 点击 file 打开设置 settings,展开 Editor 找到 file and code templates
- 找到 Vue single file component 并选中它,然后点击copy
- 复制后底部出现了一个新的文件
- 把 Name 改成 Vue Component,然后把代码里的 “COMPONENT_ ”删掉,最后点 ok 就完事了
四、vue-router
Vue Router 是Vue.js(opens new window)官方的路由管理器。
这里简单说一下代码是什么实例:
有很多网站大框架不变,按按钮时只是一块主显示区域刷新,我们用vue-router路由就是想达到相同的效果。
在空的vue-cli项目中:
下载vue-router路由:
npm install vue-router --save-dev
1.在空的vue-cli文件的src/main.js中配置路由
import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描里面的路由配置
Vue.config.productionTip = false // 阻止启动生产消息,默认的
new Vue({
el: '#app',
//配置路由
router,
components: {
App },
template: '<App/>'
})
我们现在有三个页面和一个主页面,我们想在主页面中可以通过按钮切换显示其它三个页面
2.三个页面(组件):
Content.vue:
<template>
<h1>一些乱七八糟的内容</h1>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped> /* scoped 当前页面起效 */
</style>
Person.vue:
<template>
<h2>person</h2>
</template>
<script>
export default {
name: "person"
}
</script>
<style scoped>
</style>
Main.vue:
<template>
<h1>首页</h1>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
3.配置导出路由
在 src/ 下新建文件router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Content from '../components/Content';
import Main from '../components/Main';
import Person from '../components/Person';
//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
routes:[
{
//路由路径
path:'/main',
name:'content',
//跳转的组件
component:Main
},
{
//路由路径
path:'/content',
name:'content',
//跳转的组件
component:Content
},
{
//路由路径
path:'/person',
//name可以不用
//跳转的组件
component:Person
}
]
});
4.主页:
<template>
<div id="app">
<h1>Vue-Router</h1>
<router-link to="/main">首页</router-link>
<router-link to="/content">内容页</router-link>
<router-link to="/person">个人页</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
/*默认的主页css,删掉也行*/
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>
然后直接在终端(要切到当前根目录)输入:
npm run dev
运行项目(默认: http://localhost:8080)
8080端口被占会顺移端口
五、Vue-ElementUI
ElementUI:适合于Vue的UI框架
官网组件
1.前期准备:
- 初始化webpack项目
vue init webpack hello-vue(文件名) - cd hello-vue ——切换目录
- 安装vue-router
cnpm install vue-router --save-dev
保存当前目录 - 安装element-ui
cnpm i element-ui -s - 安装依赖
npm install - 安装sass加载器
cnpm install sass-loader node-sass --save-dev - 启动测试
npm run dev - idea打开项目
2.简单项目代码
在src/下新建router,views文件夹
在router/ 下新建index.js文件
在views/ 下新建Main.vue,Login.vue文件
这里先给出完整项目,在介绍相关代码
提前安装一下axios,终端输入:cnpm install --save axios vue-axios
(1).在根目录(/hello-vue)下新建/static/mock/data.json
{
"name":"person",
"url": "https://www.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/"
}
]
}
(2).修改src/main.js文件:
import Vue from 'vue'
import App from './App'
import router from './router'
//导入element-ui和css文件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
Vue.use(router);
Vue.use(ElementUI);
new Vue({
el: '#app',
router,
render:h=>h(App) //ElementUI
})
(3).组件
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> -->
<!-- name-传组件名 params传递参数,需要对象:v-bind (:to) -->
<router-link :to="{name: 'UserProfile',params: {id: 1}}">个人信息</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<!--插入的地方-->
<router-link to="/user/list">用户列表</router-link>
</el-menu-item>
<el-menu-item index="1-3">
<router-link to="/goHome">回到首页</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-submenu index="3">
<template slot="title"><i class="el-icon-caret-right"></i>系统管理</template>
<el-menu-item-group>
<el-menu-item index="3-1">用户设置</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>
<!-- <span>{
{
name}}</span>-->
</el-header>
<el-main>
<!--在这里展示视图-->
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
// props:['name'],
name: "Main"
}
</script>
<style scoped > /* <style scoped lang="scss"> lang="scss" 项目没有对scss进行支持 */
.el-header {
background-color: #25b1ff;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
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="dialogVisiable" 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:"密码不可为空",tigger:"blur"}
]
},
//对话框显示和隐藏
dialogVisible:false
}
},
methods:{
onSubmit(formName){
//为表单绑定验证功能
this.$refs[formName].validate((valid)=>{
if(valid){
//使用vue-router路由到指定界面,该方式称为编程式导航
this.$router.push('/main');
/*this.$router.push('/main/'+this.form.username);*/
}else{
this.dialogVisible=true;
return false;
}
});
}
}
}
</script>
<style scoped>/* <style lang="scss" scoped> lang="scss" 有问题 因为项目没有对scss进行支持,需要另外安装第三方包的依赖来对scss进行解析 */
.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>
NotFound.vue:
<template>
<div>
<h1>404,没有找到该页面</h1>
</div>
</template>
<script>
export default {
name: " NotFound"
}
</script>
<style scoped>
</style>
(3-2).组件
在views/下新建user/List.vue和Profile.vue
List.vue:
<template>
<h1>用户列表</h1>
</template>
<script>
export default {
name: "UserList"
}
</script>
<style scoped>
</style>
Profile.vue:
<template>
<div>
<h1>个人信息</h1>
<!-- {
{
$route.params.id }}-->
{
{
id}}
</div>
</template>
<script>
export default {
props:['id'],
name: "UserProfile",
/* 过滤器 进入路由之前 */
beforeRouteEnter:(to,from,next)=>{
next(vm => {
//跳入下一页面 next('/path’);跳入另一个路由 next(false)返回原来的页面 next((vm)=>{})仅在beforeRouteEnter中可用。vm是组件实例
vm.getData(); //进入路由之前执行getData
});
},
/* 在进入路由后*/
beforeRouteLeave:(to,from,next)=> {
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>
(4)index.js(配置路由)
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',
path:'/main/',
component:Main, //嵌套路由
props:true,
children:[
/*{path:'/user/profile',component:UserProfile},*/
{
path:'/user/profile/:id' , name:'UserProfile',component:UserProfile,props:true},
{
path:'/user/list',component:UserList}
]
},{
path:'/goHome',
redirect: '/main'
},{
path:'*',
component: NotFound
}
]
});
到这即可运行项目,终端输入:npm run dev
网页打开:http://localhost:8080/login
随便输入登录后进入:http://localhost:8080/main
3.代码细节
(1).参数传递
1>>Main.vue中的:
<!-- <router-link to="/user/profile">个人信息</router-link> -->
<!-- name-传组件名 params传递参数,需要对象:v-bind (:to) -->
<router-link :to="{name: 'UserProfile',params: {id: 1}}">个人信息</router-link>
id: 1——就是需要传的参数
2>>修改index.js
Main的子路由children的path
{path:’/user/profile/:id’ , name:‘UserProfile’,component:UserProfile}
3>>传到Profile.vue组件后
用{
{ $route.params.id }}显示在页面上
ps:template下只能有一个标签
(2)传参数props解耦
1>>修改Main的子路由children加上props:true
2>>在Profile.vue的export中加上props:[‘id’]
3>>在Profile.vue中把 { { $route.params.id }}替换成{ {id}}
(3)重定向
在index.js中的export的routes中加上:
{
path:’/goHome’,
redirect: ‘/main’
}
在 Main.vue 中加上
<el-menu-item index="1-3">
<router-link to="/goHome">回到首页</router-link>
</el-menu-item>
(4)连接登录页面
这个会影响后面的测试,所以用完就注释了
1>>修改login.vue :
/*this.$router.push('/main');*/
this.$router.push('/main/'+this.form.username);
2>>修改index.js
path:'/main/:name',
// path:'/main/',
component:Main, //嵌套路由
props:true,
3>>修改Main.vue
在<script>的export中加上 props:[‘name’]
并在Main.vue的</el-header>的最后加上
</el-dropdown>
<span>{
{
name}}</span>
</el-header>
此时登录时输入的用户名会显示在mian页面
(5)路由
index.js的export的开头有 mode:‘history’,
这是路径不带# 的风格
默认是mode:‘hash’ ,就是路径(url)带#的样子
(6)404
配置error页面:
在index.js页面的export的routes最后配置
{
path:'*',
component: NotFound
}
*,除了routes中path出现的地址,其它都跳转到error
routes:[
{
path:'/login',
component:Login
},
{
// path:'/main/:name',
path:'/main/',
component:Main, //嵌套路由
props:true,
children:[
/*{path:'/user/profile',component:UserProfile},*/
{
path:'/user/profile/:id' , name:'UserProfile',component:UserProfile,props:true},
{
path:'/user/list',component:UserList}
]
},{
path:'/goHome',
redirect: '/main'
},{
path:'*',
component: NotFound
}
]
(7)路由钩子
axios 需要安装(上面没安的话:cnpm install --save axios vue-axios)
修改Profile.vue
export default {
props:['id'],
name: "UserProfile",
/* 过滤器 进入路由之前 */
beforeRouteEnter:(to,from,next)=>{
next(vm => {
//跳入下一页面 next('/path’);跳入另一个路由 next(false)返回原来的页面 next((vm)=>{})仅在beforeRouteEnter中可用。vm是组件实例
vm.getData(); //进入路由之前执行getData
});
},
/* 在进入路由后*/
beforeRouteLeave:(to,from,next)=> {
next();
},
methods:{
getData:function (){
this.axios({
method:'get',
url:'http://localhost:8080/static/mock/data.json'
}).then(function (response){
console.log(response)
})
}
}
}
此时在main页面,我们打开console可以看到data.json中的数据