vue-router基础配置,用于刚开始搭建项目

58 阅读1分钟

routerjs文件配置

import {createRouter, createWebHistory} from "vue-router";

const routes = [{
    path: '/',
    redirect: '/home'
}, {
    path: '/home',
    name: 'home',
    component: () => import('../views/home/index.vue'),
    meta: {
        title: 'Home'
    }
}]

//router实例
const router = createRouter({
    history: createWebHistory(),
    routes
})
// 全局前置路由守卫
router.beforeEach((to, from, next) => {
    next();
})

// 全局解析守卫
router.beforeResolve(async to => {
});

// 全局后置钩子
router.afterEach((to, from, failure) => {
// if (!failure) sendToAnalytics(to.fullPath)
})
export default router

main.js注册

import { router } from './router'//引入route文件
app.use(router)//挂载在vue实例上

app.vue文件使用

<router-view></router-view>

本文主要是为了快速搭建项目,请参考使用