vue3(笔记)4.0 vueRouter.导航守卫.ElementPuls知识点

---vueRouter

创建路由:

完整写法(懒加载):

默认写法与vue2一致:  导入 然后 写成component: LoginPage

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL), routes: [{path:'/login', component: () =>import('@/views/login/LoginPage.vue')},// 设置默认路径{path:'/',component: () =>import('@/views/layout/LayoutContainer.vue'),redirect:'/article/manage',children:[{path:'/article/manage', component: () =>import('@/views/article/ArticleManage.vue')},{path:'/article/channel', component: () =>import('@/views/article/ArticleChannel.vue')}]}]
})

路由对象以及路由参数: 

                                                       跳转: router.push('/') 

---vueRouter导航守卫

文档:

示例代码:

 登录访问拦截,和vue2相比 没有了next() 默认放行 return true

router.beforeEach((to)=>{const userStore = useUserStore()
//  判断是否有token值 并且 进入的不是非登录页   if(!userStore.token && to.path!=='/login') return '/login'
})

--- ElementPlus 安装

全局中文显示(APP.js文件):

<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
</script><template>
<div><el-config-provider :locale="zhCn"><router-view></router-view> </el-config-provider>
</div>
</template><style scoped></style>

              ElementPlus支持使用自定义插槽来添加修改数据(详细可查看官网)