路由设置部分
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import main from '@/components/main'
import one from '@/components/one'
import two from '@/components/two'
import three from '@/components/three'
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
{
path:'/',
redirect:'/main'
},
{
path:'/main',
component:main,
children:[
{
path:'/one',
component:one
},
{
path:'/two/:id',
name:'two',
component:two
},
{
path:'/three',
name:'three',
component:three
}
]
}
]
})
main界面
<template>
<div class="main">
<button @click="btn1()">点击我实现页面跳转1</button>
<button @click="btn2()">点击我实现页面跳转2</button>
<button @click="btn3()">点击我实现页面跳转3</button>
<router-view></router-view>
</div>
</template>
<script>
export default{
name:'main',
methods:{
//所呈现形式为/one
btn1(){
this.$router.push({
path:'/one'
})
},
//所呈现形式为/two/123 取数据方式为 this.$route.params.id
btn2(){
this.$router.push({
name:'two',
params:{
id:'123'
}
})
},
//上下两种前面一种需要去路由器里面配置:id query可以直接进行参数设置不需要再去路由里面配置
//所呈现形式为/three?id=444&name=zhangsan 取数据方式为 this.$route.query.id
btn3(){
this.$router.push({
path:'/three',
query:{
id:'444',
name:'zhangsan'
}
})
}
}
}
</script>
<style>
</style>