vue-router

1. Install front-end routing (–save to save the configuration)

npm install vue-router --save

2. Use routing

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. Page jump (App.vue page)

<router-view></router-view>
<router-link :to="{path:'apple'}">to apple</router-link>

4. Route plus parameters

{
        path:'/apple/:color',
        component:Apple
    }

Get parameter in child component

methods:{
    getParam(){
        console.log(this.$route.params)
    }
}

There are sub-routes in sub-pages

{
        path:'/apple/:color',
        component:Apple,
        children:[
            {
                path:'red',
                component:Redapple
            }
        ]
    },