vue-router基本使用

1. 安装

1. npm install --save vue-router or yarn add vue-router

---

2. 基本使用

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = {
  template: '
home
'
}

const routes = [
    { path: '/home', component: Home },
    { path: '**', redirect: '/home', hidden: true }
]

const router = new VueRouter({
    routes
})

// app.js
const app = new Vue({
    router,
}).$mount("#app")

---

3. 动态路由匹配

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const home = {
  template: '
home
'
}

const user = {
  template: '
{{ this.$router.param }}
'
}
const routes = [
  { path: '/home', component: home },
  { path: '/user/:id', component: user},
  { path: '**', redirect: '/home', hidden: true }
]

const router = new VueRouter({
  routes
})

// app.js

const app = new Vue({
  router
}).$mount('#app')

---

4. 嵌套路由

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
      path: '/home',
      component: home,
      children: [
        { path: '/product', component: product },
        { path: '/details', component: details }
     ]
  }
]

const router = new VueRouter({
    routes
})

// app.js
const app = new Vue({
  router,
}).$mount('#app')

---

that's all
Note:后续再补充