vue-router实例讲解
1.安装前端路由(–save保存配置)
npm install vue-router --save
2.使用路由
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Apple from '@/components/apple'
import Banan from '@/components/banan'
Vue.use(Router)
export default new Router({
//接受前后切换
mode:'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'/apple/:color',
component:Apple
},
{
path:'/banan',
component:Banan
},
]
})
3.页面跳转（App.vue页面）
<router-view></router-view>
<router-link :to="{path:'apple'}">to apple</router-link>
4.路由加参数
{
path:'/apple/:color',
component:Apple
}
在子组件中获取参数
methods:{
getParam(){
console.log(this.$route.params)
}
}
在子页面里有子路由
{
path:'/apple/:color',
component:Apple,
children:[
{
path:'red',
component:Redapple
}
]
},