vue-router的使用,以及路由守衛的使用,複製直接用!
阿新 • • 發佈:2021-02-03
技術標籤:Vue.jsvuejavascript
import Vue from 'vue' // 引入VUE例項
import VueRouter from 'vue-router' // 引入vue路由
Vue.use(VueRouter) // vue例項呼叫路由
const routes = [ // 配置路由
{
path: '/', // 進入系統首次載入的路由 一般都是登入頁面
redirect: {
name: 'Customer'
}
},
{ // 登入頁路由配置
path: '/login',
name: 'Login',
component: () => import('@/views/login/index')
},
{ // 主頁路由配置
path: '/home',
name: 'Home',
component: () => import('@/views/home/index'),
children: [ // 進入主頁後首次載入路由頁面配置
{
path: '',
redirect: '/customer'
},
{ // 子路由配置
path: '/customer',
component: () => import('@/views/customer/index'),
name: 'Customer'
},
]
}
]
const router = new VueRouter({ // 建立一個路由物件
routes
})
router.beforeEach((to, form, next) => { // 全域性路由守衛
console.log(to, form, next, '1111')
if (to.name === 'Login') {
alert('您不配!')
// 不執行next()方法路由就不會跳轉
} else next(); // 執行next()方法,跳轉到指定路由頁面
})
export default router // 匯出路由,直接在main.js裡面呼叫即可
// main.js
import router from './router'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')