66 lines
1.8 KiB
JavaScript
66 lines
1.8 KiB
JavaScript
import Vue from 'vue' // 引入 vue nodem_moudules 不需要写路径
|
|
import VueRouter from 'vue-router' // 引入vuroute
|
|
import index from "../views/index.vue"
|
|
import user from "../views/user.vue"
|
|
import admin from "../pages/admin.vue"
|
|
Vue.use(VueRouter)
|
|
const routes = [
|
|
{ path: '/', component: index },
|
|
{ path: '/a/b/c/d', name: "user", component: user },
|
|
{
|
|
path: "/admin", beforeEnter: (to, from, next) => {
|
|
// ...
|
|
console.log("路由独享")
|
|
next()
|
|
}, component: admin
|
|
},
|
|
{ path: "/params", name: "params", component: () => import("../pages/params.vue") }
|
|
]
|
|
// path
|
|
// name 名字
|
|
const router = new VueRouter({
|
|
mode: "history",
|
|
routes // (缩写) 相当于 routes: routes
|
|
})
|
|
|
|
// 1.全局前置守卫
|
|
// 2.路由独享守卫
|
|
// 3.组件内解析守卫
|
|
// 4. 解析守卫
|
|
// 5. 全局后置守卫
|
|
|
|
|
|
// 前置守卫
|
|
router.beforeEach((to, from, next) => {
|
|
// console.log(to,from)
|
|
if (to.path == "/") {
|
|
// alert("你即将到首页")
|
|
console.log("你即将到首页")
|
|
}
|
|
if (to.path == "/a/b/c/d") {
|
|
console.log("到user")
|
|
next({ path: '/admin', query: { name: 123 } })
|
|
} else {
|
|
next()
|
|
}
|
|
// ...
|
|
// next() // 继续跳转
|
|
// next(false) 停止跳转 这次跳转不生效
|
|
// next('url') or next({path,query,params,name}) 重定向到其他也页面
|
|
})
|
|
router.beforeResolve((to, from, next) => {
|
|
console.log("解析收尾")
|
|
next()
|
|
|
|
// ...
|
|
// next() // 继续跳转
|
|
// next(false) 停止跳转 这次跳转不生效
|
|
// next('url') or next({path,query,params,name}) 重定向到其他也页面
|
|
})
|
|
// 后置 跳转完成之后
|
|
router.afterEach((to, from) => {
|
|
console.log(to, from, "后置")
|
|
|
|
// ...
|
|
})
|
|
export default router |