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支持使用自定义插槽来添加修改数据(详细可查看官网)