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: '<div>home</div>'
}

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: '<div>home</div>'
}

const user = {
  template: '<div>{{ this.$router.param }}</div>'
}
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:后续再补充

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容