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文件):

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