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
            }
        ]
    },