编程导航
通过编程实现返回上一页丶返回首页丶下一页等页面导航
1.index.js 配置路由规则
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Goods from '../components/Goods'
import News from '../components/News'
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
name:'Goods',
path:'/Goods',
component:Goods,
},
{
name:'News',
path:'/News',
component:News,
},
]
})
2.App.vue 设置首页跳转页面a标签
<template>
<div id="app">
<img src="./assets/logo.png">
<router-link :to="{name:'Goods'}">商品</router-link>
<router-link :to="{name:'News'}">新闻</router-link>
<router-view/>
</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>
3.创建component 新组件
Goods.vue
<template>
<div class="hello">
商品列表页面
<button @click="prev">返回</button>
<button @click="index">返回首页</button>
</div>
</template>
<script>
export default {
data(){
return {
}
},
methods:{
prev(){
//go()方法参数 -1:返回上一级 1:前进下一级 3:前进三级
this.$router.go(-1)
},
index(){
//push方法准确定位返回的页面,方法内参数是一个对象,可以添加路由参数
this.$router.push({name:'HelloWorld'});
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
News.vue
<template>
<div class="hello">
新闻列表页面
<button @click="prev">返回</button>
</div>
</template>
<script>
export default {
data(){
return {
}
},
methods:{
prev(){
this.$router.go(-1);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
4.配置下一级页面
HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button @click="next">前进</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
next() {
this.$router.go(1);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
多视图
App.vue作为主页面框架可以构建多个router-view视图
1.App.vue主框架下构造多视图并为每个视图设置样式
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-link :to="{name:'Goods'}">商品</router-link>
<router-link :to="{name:'News'}">新闻</router-link>
<!--视图可以有多个,App.vue是主页面的一个框架，多个视图router-view构建主页面各个部分-->
<!--router-view默认不给name值时，在路由配置中name键为default-->
<router-view class="view" name="header"/>
<router-view class="view"/>
<router-view class="view" name="footer"/>
</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;
}
.view{
height:150px;
border:1px solid skyblue;
}
</style>
2.为每个视图配置路由,index.js主要负责路由规则配置
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Goods from '../components/Goods'
import News from '../components/News'
import hd from '../components/hd'
import con from '../components/content'
import ft from '../components/ft'
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
components:{
// name值 : 组件定义值
//name值header来自App.vue视图,hd值来自引入模板设置的自定义模板别名
header:hd,
default:con,
footer:ft,
}
},
{
name:'Goods',
path:'/Goods',
component:Goods,
},
{
name:'News',
path:'/News',
component:News,
},
]
})
3.创建多视图模板
hd.vue
<template>
<h2>这里是头部</h2>
</template>
<script>
export default {
name: "hd"
}
</script>
<style scoped>
</style>
content.vue
<template>
<h2>这里是body部分</h2>
</template>
<script>
export default {
name: "content"
}
</script>
<style scoped>
</style>
ft.vue
<template>
<h2>这里是底部</h2>
</template>
<script>
export default {
name: "ft"
}
</script>
<style scoped>
</style>
4.在index.js中引入模板
import hd from ‘…/components/hd’
import con from ‘…/components/content’
import ft from ‘…/components/ft’
嵌套路由
路由规则添加选项 children:[{},{},{}]
模拟手机类目嵌套
1.创建各种手机模板
huawei.vue
sanxing.vue
vivo.vue
mi.vue
2.构造路由规则
index.js
{
name:'phone',
path:'/phone',
component:Phone,
//路由嵌套，先匹配父路由在通过路由规则匹配子路由
children:[
{
name:'phone.huawei',
path:'huawei',
component:Huawei,
},
{
name:'phone.sanxing',
path:'sanxing',
component:Sanxing,
},
{
name:'phone.vivo',
path:'vivo',
component:Vivo,
},
{
name:'phone.mi',
path:'mi',
component:Mi,
children: [
{
name:'mi.details',
path:'mi.details',
component:MiDetails
}
]
}
]
},
3.引入各种手机的模板
import Sanxing from '../components/sanxing'
import Vivo from '../components/vivo'
import Mi from '../components/mi'
import MiDetails from '../components/MiDetails'
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Goods from '../components/Goods'
import News from '../components/News'
import hd from '../components/hd'
import con from '../components/content'
import ft from '../components/ft'
//嵌套路由
import Phone from '../components/phone'
import Huawei from '../components/huawei'
import Sanxing from '../components/sanxing'
import Vivo from '../components/vivo'
import Mi from '../components/mi'
import MiDetails from '../components/MiDetails'
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
components:{
// name值 : 组件定义值
header:hd,
default:con,
footer:ft,
}
},
{
name:'Goods',
path:'/Goods',
component:Goods,
},
{
name:'News',
path:'/News',
component:News,
},
{
name:'phone',
path:'/phone',
component:Phone,
//路由嵌套，先匹配父路由在通过路由规则匹配子路由
children:[
{
name:'phone.huawei',
path:'huawei',
component:Huawei,
},
{
name:'phone.sanxing',
path:'sanxing',
component:Sanxing,
},
{
name:'phone.vivo',
path:'vivo',
component:Vivo,
},
{
name:'phone.mi',
path:'mi',
component:Mi,
children: [
{
name:'mi.details',
path:'mi.details',
component:MiDetails
}
]
}
]
},
]
})
4.在模板中构造跳转标签
注意:
1.template模板标签中只能有一个根目录 div代替 否则报错
2.< router-view class=“phone”></ router-view >视图必须添加，否则不显示子模板中的内容
<template>
<div >
<h2>这里是主体内容</h2>
<router-link :to="{name:'phone'}">手机类目</router-link>
<!--添加一个router-view用来装phone.vue模板，否则不显示模板内容-->
<router-view class="phone"></router-view>
</div>
</template>
content.vue
<template>
<div >
<h2>这里是主体内容</h2>
<router-link :to="{name:'phone'}">手机类目</router-link>
<!--添加一个router-view用来装phone.vue模板，否则不显示模板内容-->
<router-view class="phone"></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
phone.vue
<template>
<div>
<h1>手机批发市场</h1>
<router-link :to="{name:'phone.huawei'}">华为</router-link>
<router-link :to="{name:'phone.sanxing'}">三星</router-link>
<router-link :to="{name:'phone.vivo'}">Vivo</router-link>
<router-link :to="{name:'phone.mi'}">小米</router-link>
<!--添加一个router-view用来装huawei.vue模板，否则不显示模板内容-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "phone"
}
</script>
<style scoped>
</style>
mi.vue
<template>
<div>
<h2>小米销售区</h2>
<router-link :to="{name:'mi.details'}">小米手机详情</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "mi"
}
</script>
<style scoped>
</style>
axios
axios 是npm社区可以搜索下载的一个模块,Vue框架中的ajax
axios的下载安装
cd 到项目文件下 npm install axios
或者 cnpm i axios -S
index.js
//引入axios
import Axs from 'axios'
Vue.prototype.$ajax = Axs;
jquery的下载与安装
cnpm i jquery -S
index.js
import $ from 'jquery'
Vue.prototype.$ = $;
案例之axios请求数据
content.vue
<template>
<div>
<h2> 主体内容 </h2>
<button @click="send"> 发起请求 </button>
</div>
</template>
<script>
import { Toast } from 'mint-ui';
export default {
data(){
return {
banner:[],
activeName:'',
dialogVisible: false
}
},
methods:{
handleClick(){},
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
},
send(){
let php = 'vue.php';
let title = 'banner1';
let url = php + '?title='+title
Toast('提示信息');
/*this.$ajax.get('http://47.96.29.109/vueProject/'+url)
.then((res)=>{
console.log(res.data)
})*/
// 分发
this.$ajax.all([
this.$ajax.get('vue.php?title=banner'),
this.$ajax.get('vue.php?title=banner'),
this.$ajax.get('vue.php?title=banner'),
])
.then(this.$ajax.spread((res1,res2,res3)=>{
console.log(res1.data)
console.log(res2.data)
console.log(res3.data)
}))
.catch((err)=>{
console.log(err)
})
}
},
created(){
/* this.$.get('http://47.96.29.109:6333/users')
.then((res)=>{
//console.log( JSON.parse(res) )
});*/
/* this.$ajax.get('http://47.96.29.109/vueProject/vue.php?title=banner')
.then((res)=>{
//console.log( res.data );
this.banner = res.data
})*/
}
}
</script>
<style scoped>
ol{
width: 600px;
}
ol li{
float: left;
}
</style>
index.js
import Axios from 'axios'
Axios.defaults.baseURL = 'http://47.96.29.109/vueProject/';
Vue.prototype.$ajax = Axios;
import $ from 'jquery'
Vue.prototype.$ = $;