• 路由map
• 路由視圖
• 路由導(dǎo)航

實(shí)現(xiàn)簡(jiǎn)單路由

import VueRouter from 'vue-router'
Vue.use(VueRouter)

let router = new VueRouter({
  mode: 'history',//這樣訪問(wèn)路由就不需要加上/#
  routes: [
    {
      path: '/a',
      component: a
    },
    {
      path: '/b',
      component: b
    }
  ]
})

new Vue({
  router,
  el: '#app',
  render: h => h(App),
  directives: {

  }
})

路由的代碼顯示在

<router-view></router-view>
<router-link :to="{path:'a'}">to a</router-link>//可以實(shí)現(xiàn)轉(zhuǎn)換成a標(biāo)簽跳轉(zhuǎn)
<router-link :to="{path:'b'}">to b</router-link>

實(shí)現(xiàn)多層參數(shù)路由

let router = new VueRouter({
  mode: 'history',//這樣訪問(wèn)路由就不需要加上/#
  routes: [
    {
      path: '/a/:color/detail/:type',
      component: a
    },
    {
      path: '/b',
      component: b
    }
  ]
})

此處
/a/:color/detail/:type
帶冒號(hào)的表示屬性為color，填的任何值都會(huì)賦值給color和type

路由嵌套

routes: [
    {
      path: '/a',
      component: a,
      children: [
        {
          path: 'aa',
          component: aa
        }
      ]
    },
    {
      path: '/b',
      component: b,
      children: [
        {
          path: 'bb',
          component: bb
        }
      ]
    }
  ]

子路由渲染在父路由的組件里，所以需要在父路由的組件加上
<router-view></router-view>
同時(shí)我們也可以通過(guò)
<router-link :to="{path:'b/bb'}">to b bb</router-link>
或者通過(guò)代碼實(shí)現(xiàn)

// 字符串
router.push('home')

// 對(duì)象
this.$router.push({path: '/login?url=' + this.$route.path});

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 帶查詢參數(shù)，變成/backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});

重定向

在routes中加上

{
      path: '/',
      redirect: '/a'
}