本节内容
学会使用路由进行组件切换
接上上节的内容进行讲解路由的使用
- 第一步
创建一个父组件和两个子组件
父组件foo.vue 的文件和子组件home.vue和me.vue
- 第二步 定义路由router.js 文件
// 定义路由
//第一步 导入路由模块vue-router 和vue.js
import VueRouter from 'vue-router'
import Vue from 'vue'
// 第二步 导入组件
import home from './home.vue'
import me from './me.vue'
// 第三步 让Vue 使用 vue-router 当做自己的路由
Vue.use(VueRouter)
// 第四步 创建路由对象
export default new VueRouter({
// mode: 'abstract', // weex 中只能使用 abstract 类型 默认可以不写 系统会自动设置为abstract
// 定义路由
routes: [
{ path: '/home', component: home},
{ path: '/me', component: me}
// { path: '/article/:url(.*)?', component: ArticleView },
// { path: '/item/:id(\\d+)', component: CommentView },
// { path: '/user/:id', component: UserView },
// { path: '/', redirect: '/home' }
]
})
第三步 在入口的app.js文件中 创建根节点组件
// 第一步 导入根组件
import foo from './src/foo.vue'
// 第二步 导入路由文件
import router from './src/Router.js'
//第三步 给根组件一个id
foo.el = '#root'
//第四步给 给根组件设置路由
foo.router = router
// 第五步 创建Vue 对象
export default new Vue(foo);
// 第六步 指定一个路由入口
router.push('me')
第四步 我们看看我们的根组件的代码
<template>
<div class="wrapper">
<div class="nav">
<text @click="jump('home')" :class="selectedPath=='home'?'nav-item-selected':'nav-item-normal'">主页{{selectedTitleColor}}</text>
<text @click="jump('me')" :class="selectedPath=='me'?'nav-item-selected':'nav-item-normal'">我的</text>
</div>
<!-- 定义路由模板视图 这个是用来加载组件的-->
<router-view class="template"></router-view>
</div>
</template>
<style>
.wrapper { align-items: center; margin-top: 40px; }
.nav{
display: flex;
flex-direction: row;
justify-content: space-around;
width:750px;
height: 88px;
}
.template{
position:absolute;
top: 128px;
bottom: 0px;
left: 0px;
right: 0px;
}
.nav-item-selected{
color:yellowgreen;
}
.nav-item-normal{
color:black;
}
</style>
<script>
export default {
data:{
selectedPath:'me'
},
methods: {
// 单击按钮跳转到指定的路径
jump: function (e) {
this.$router.push(e);
this.selectedPath = e;
}
}
}
</script>
第五步 home.vue 和me.vue 中的代码
home.vue
<template>
<div class="home-container">
<text>主页</text>
</div>
</template>
<script>
export default{
}
</script>
<style>
.home-container{
background-color:red;
width:750px;
font-size: 30px;
text-align: center;
}
</style>
me.vue
<template>
<div class="me-container">
<text>我的</text>
</div>
</template>
<script>
export default{
}
</script>
<style>
.container{
background-color: green;
width:750px;
font-size: 30px;
}
</style>
210ADF6F-3350-475E-BE90-200CD377829A.png
A6844CE7-BB6F-43F4-862E-EAFE71797D18.png
路由的作用是在单页面内,进行组件的切换!
