1、搭建vue脚手架
2、通过vue脚手架，我们搭建好了基础的vue，接下来就开始使用vue-cli来构建基础路由项目
主要文件目录如下图
接下来修改对应文件内容
//main.js
import Vue from 'vue'
import router from './router'
//快速搭建桌面组件------用的话直接引用下面三行即可
// import ElementUI from 'element-ui';
//import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI);
new Vue({
el: '#app',
router: router,
render: h => h('router-view')
})
- 其中
<router-view>是用来渲染通过路由映射过来的组件，当路径更改时，<router-view>中的内容也会发生更改。 -
element-ui：[element-ui]是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
//src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home';
//import Index from '@/components/Index';
import About from '@/components/About';
import User from '@/components/User';
Vue.use(Router)
const routers= new Router({
mode: 'history',
routes: [
{
path: '/',
component: Home,
},
{
path: '/about',
component: About
},{
path: '/user/:id',
component: User
}
]
});
routers.beforeEach((to, from, next) => {
if (to.matched.length ===0) { //如果未匹配到路由
from.name ? next({ name:from.name }) : next('/'); //如果上级也未匹配到路由则跳转登录页面，如果上级能匹配到则转上级路由
} else {
next(); //如果匹配到正确跳转
}
});
export default routers
-
routers.beforeEach://定义全局钩子,在路由跳转时做相应的处理 -
mode: 'history'://在创建的 router 对象中，如果不配置 mode，就会使用默认的 hash 模式，该模式下会将路径格式化为 #! 开头。添加 mode: 'history' 之后将使用 HTML5 history 模式，该模式下没有 # 前缀
//src/components/Home.vue
<template>
<div>
<h3>{{home}}</h3>
<router-link to="/about" >about页面</router-link>
<span @click="clickme">user页面</span>
<router-view/>
<span class="wrapper">
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="info">信息按钮</el-button>
</span>
</div>
</template>
<script>
export default{
data(){
return{
home:'Home页面'
}
},
methods:{
clickme:function(){
this.$router.push({ path: '/user/1', query: { id: 'user', name: 'John', age: 'John' }})
}
}
}
</script>
-
el-button:在main引用的时候element-ui才起到作用如下图所示，不引用删除即可不删也行不影响 - 编程式导航
@click="clickme"对应的methods中this.$router.push({ path: '/user/1', query: { id: 'user', name: 'John', age: 'John' }}):实现路由跳转path配合query使用，name(这是组件中起的名字)配合params使用。
//src/components/User.vue
<template>
<div>
<h3>welcome {{user}}</h3>
</div>
</template>
<script>
export default{
name:'user',
data(){
return{
user:'user页面'
}
},
}
</script>
//src/components/About.vue
<template>
<div>
<div>
<h3>{{data}}</h3>
</div>
</div>
</template>
<script>
export default{
data(){
return{
data:'about页面'
}
}
}
</script>
上面已经配置了三个路由，当打开 http://localhost:8080 就会在 <router-view> 中渲染 Home.vue 组件
3、父组件向子组件传递数据
子组件部分：
在components中新建Header.vue、Index.vue
//src/components/Header.vue
<template>
<div>
{{logo}}
</div>
</template>
<script>
export default{
data(){
return{
}
},
props:['logo']
}
</script>
-
父组件向子组件传递数据,在 Vue 中，可以使用 props 向子组件传递数据，如果需要从父组件获取 logo 的值，就需要使用 props: ['logo']。
在 props 中添加了元素之后，就不需要在 data 中再添加变量了
父组件部分：
//src/components/Index.vue
<template>
<div>
<h3>{{data}}</h3>
<p>{{num}}</p>
<a class="btn" v-on:click="randomNum">点击</a>
<br />
<br />
<HeadDiv :logo='headMsg'></HeadDiv>
</div>
</template>
<script>
import HeadDiv from './Header';
export default{
data(){
return{
data:'index页面',
num:1,
headMsg:'headMsg'
}
},
components:{
HeadDiv
},
methods:{
randomNum:function () {
this.num = parseInt(10*Math.random());
}
}
}
</script>
再给Home.vue添加一条路由<router-link to="/index" >首页</router-link>
<template>
<div>
<h3>{{home}}</h3>
<router-link to="/index" >index页</router-link>
<router-link to="/about" >about页面</router-link>
<span @click="clickme">user页面</span>
<router-view/>
</div>
</template>
-
<HeadDiv :logo='headdiv'></HeadDiv>：使子组件的logo继承headdiv数据 -
import HeadDiv from './Header'：引用组件 -
components:{HeadDiv}：给父组件添加子组件
然后就能将Index.vue中 headMsg的值传给 Header.vue 了，当打开 http://localhost:8080后点击index页出现下图：
4、子组件向父组件传递数据
子组件部分：
在components中新建Login.vue、Index.vue
//src/components/Login.vue
<template>
<div>
用户名：
<input v-model="username" @change="setUser"/>
</div>
</template>
<script>
export default{
data(){
return{
username:''
}
},
methods:{
setUser:function(){
this.$emit('transferUser',this.username)
}
}
}
</script>
- 当<input>的值发生变化的时候，将 username 传递给 Index.vue。首先声明一个了方法 setUser，用 change 事件来调用 setUser
- 在 setUser 中，使用了 $emit 来遍历 transferUser 事件，并返回 this.username其中 transferUser 是一个自定义的事件，功能类似于一个中转，this.username 将通过这个事件传递给父组件
//src/components/Index.vue
<template>
<div>
<h3>{{data}}</h3>
<p>{{num}}</p>
<a class="btn" v-on:click="randomNum">点击</a>
<br />
<br />
<HeadDiv :logo='headMsg'></HeadDiv>
<LoginDiv @transferUser="getUser"></LoginDiv>
<p>用户名：{{user}}</p>
</div>
</template>
<script>
import HeadDiv from './Header';
import LoginDiv from './Login';
export default{
data(){
return{
data:'index页面',
num:1,
headMsg:'headMsg',
user:''
}
},
components:{
HeadDiv,
LoginDiv
},
methods:{
randomNum:function () {
this.num = parseInt(10*Math.random());
},
getUser:function(msg){
this.user=msg;
}
}
}
</script>
- 在父组件 Index.vue 中，声明了一个方法 getUser，用 transferUser 事件调用 getUser 方法，获取到从子组件传递过来的参数 username
- getUser 方法中的参数 msg 就是从子组件传递过来的参数 username
然后就能将Login.vue中 headMsg的值传给 Index.vue 了，当打开 http://localhost:8080后点击index页在input框输入值出现下图：
