1. 安装
-
npm install --save vue-routeroryarn 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:后续再补充
