vue-路由

需要掌握：

路由map
路由视图
路由导航

路由参数的配置
嵌套路由的使用

命名路由和命名视图
重定向

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'

import Apple from '../components/apple.vue'
import Banner from '../components/banner.vue'
import AppleRed from '../components/AppleRed.vue'

Vue.use(Router)
export default new Router({
  mode:"history",
  routes: [
    {
      path:'/',
      redirect:'/apple'
    },
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },

    {
      // path: '/apple/:id/detail/:type',
      path: '/apple',
      name: 'Apple',
      component: Apple,
      children:[
        {
          path:'red',
          component:AppleRed
        }
      ]
    },

    {
      path:'/banner',
      name:'Banner',
      component:Banner
    }
  ]
})

router-link 设置

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
  
   <router-link :to='{path:"apple/red"}'>Go to applered</router-link>
   <router-link :to='{path:"apple"}'>Go to apple</router-link>
    <router-link :to='{path:"banner"}'>Go to banner</router-link>
    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

获取路由参数

<template>
<div>
     <p>
      i am apple
      {{$route.params.id}}
  </p>
  <button @click="getparms">get parms</button>
  <router-view/>
</div>

</template>

<script>
export default {
  name: 'Apple',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    getparms:function(){
      return console.log(this.$route.params)
    }
  }
}
</script>