- 路由配置
           {
               path: '/admin',
               name: 'admin',
               component: () => import('../views/AdminView.vue'),               http://localhost:5173/admin
               children:[
                   {
                       path: 'home',
                       name: 'home',
                       component: () => import('../views/HomeView.vue')         http://localhost:5173/admin/home
                   },
                   {
                      path: 'info',
                      name: 'info',
                      component: () => import('../views/InfoView.vue')          http://localhost:5173/admin/info
                  },
               ]
            }

        - 页面关系
            - AdminView.vue
                <div class="header">
                    <router-link>HOME</router-link>    http://localhost:5173/admin/home
                    <router-link>INFO</router-link>    http://localhost:5173/admin/info
                </div>

                <div>
                    <router-view/>    子路由组件显示在这里
                </div>

         注意：父路由的组件中定义<router-view/>，用于显示子路由中的内容。

import {createRouter, createWebHistory} from 'vue-router'


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/LoginView.vue')
    },
    {
      path: '/admin',
      name: 'admin',
      component: () => import('../views/AdminView.vue'),
      children: [
        {
          path: 'mine',
          name: 'mine',
          component: () => import('../views/MineView.vue'),
        },
        {
          path: 'order',
          name: 'order',
          component: () => import('../views/OrderView.vue'),
        }
      ]
    }

  ]
})

export default router

<template>
  <h1>INFO</h1>
</template>

<script setup>
import {useRouter} from "vue-router"

const router = useRouter()
router.push({path: "/admin/mine"})
router.push({name: "login"})
router.push({name: "login", params: {nid: 100}, query: {page: 100}})

</script>

<style scoped>

</style>



router.replace
vue+router实现单页面应用：
历史记录 = [A,B,C,D,新页面]

 - 浏览器的本地存储
     - cookie，有效期+保存
     - document.cookies = ...

- localStorage 保存
    localStorage.setItem(key,value)
    localStorage.getItem(key)
    localStorage.removeItem(key)
    localStorage.clear()

- sessionStorage 关闭浏览器，自动消失
    sessionStorage.setItem(key,value)
    sessionStorage.getItem(key)
    sessionStorage.removeItem(key)
    sessionStorage.clear()

// router.beforeEach(function (to,from,next){})
router.beforeEach((to, from, next) => {
    //1.访问登录页面，不需要登录就可以直接去查看
    if ( === "login") {
        next()
        return
    }

    //2.检查用户登录状态（登录成功，继续往后走next()； 未登录，跳转到登录页面）
    let username = localStorage.getItem("name")
    if (!username) {
        next({name: "login"})
        return;
    }

    //3.登录成功且获取用户信息，继续向后访问
    next()
})

export default router

<template>
  <div class="pg-header">
    <div class="container">
      <router-link to="/admin/mine">我的</router-link>
      <router-link to="/admin/order">订单</router-link>

      <div >
        <a @click="doLogout">退出</a>
      </div>
    </div>
  </div>
  <div class="container">
    <router-view/>
  </div>

</template>

<script setup>

import {useRouter} from "vue-router";

const router = useRouter()

function doLogout() {
  localStorage.clear()
  router.push({name: "login"})
}
</script>

<style scoped>

.pg-header {
  height: 48px;
  background-color: cornflowerblue;
  line-height: 48px;
}

.container {
  width: 980px;
  margin: 0 auto;
}

.pg-header a {
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
}
</style>

安装
        npm install pinia
        手动配置
        或
        npm create vue@latest

 状态管理组件
        - state，状态值
        - getter，计算属性
        - action，定义函数

    案例：用户登录+保存用户信息+用户状态

src连接:链接：https:///s/1C-k3fUUw1SYLh4l4WfAGIg?pwd=vuef 
提取码：vuef 

npm install vue3-cookies

    main.js
        import VueCookies from "vue3-cookies";
        app.use(VueCookies)

    其他地方：
        import {useCookies} from "vue3-cookies";
        const {cookies} = useCookies()

        cookies.set("key","value", 30)
        cookies.get("key")
        cookies.remove("key")
        #官方文档
        https:///KanHarI/vue3-cookies

    注意事项：

        cookies.set("v1",JSON.stringify({id:1,name:"wupeiqi"}), 300)
        cookies.get("v1")

function doLogin() {
  // 1.获取数据
  console.log(username.value, password.value)
  // 2.发送网络请求
  _axios.get("/api/v1/course/category/free/?courseType=free").then((res) => {
    console.log(res.data);
  })
  // 3.本地存储用户信息（登录凭证）
  // localStorage.setItem("name", username.value)
  let info = {id: 1, name: username.value, token: "xxx88sdkweisdfsd"}
  store.doLogin(info)

  // 4.跳转到首页
  router.push({name: "mine"})

}

创建项目
        - vue
        - drf

 drf项目初始化动作
        POST
      
        {"username":"admin","password":123}
        ...
 vue项目的初始化
        登录是基于axios发送请求测试

现象：vue前端向后端API发送请求时有问题
        login:1 Access to XMLHttpRequest at

        请求跨域问题

        1.浏览器中有同源策略，当发送ajax请求：请求的地址与当前所在网址保持一致，如果不一致，浏览器就会组织请求。

        2.为什么 postman/requests 不报错？

        3.在网站用cdn地址？
            <script src="...."></script>
            <img src="....."/>

        4.项目开发时，经常会用到跨域
                -> 前端页面
                -> 后端接口

        5.解决方式
            - jsonp，发送ajax浏览器阻止；所以不在使用ajax发送请求，而是构造script标签+src发送请求获取结果。
            - cors，添加响应头，让浏览器别再限制。

现象：vue前端向后端API发送请求时有问题
        login:1 Access to XMLHttpRequest at 

        请求跨域问题

        1.浏览器中有同源策略，当发送ajax请求：请求的地址与当前所在网址保持一致，如果不一致，浏览器就会组织请求。

        2.为什么 postman/requests 不报错？

        3.在网站用cdn地址？
            <script src="...."></script>
            <img src="....."/>
        4.项目开发时，经常会用到跨域
               -> 前端页面
                -> 后端接口

        5.解决方式
            - jsonp，发送ajax浏览器阻止；所以不在使用ajax发送请求，而是构造script标签+src发送请求获取结果。
            - cors，添加响应头，让浏览器别再限制。

        6.我们的API如果实现CORS？中间件
            Access-Control-Allow-Origin:"*"
            Access-Control-Allow-Headers:"*"

from django.utils.deprecation import MiddlewareMixin


class CorsMiddleware(MiddlewareMixin):

    def process_response(self, request, response):
        response['Access-Control-Allow-Origin'] = "*"
        response['Access-Control-Allow-Headers'] = "*"
        response['Access-Control-Allow-Methods'] = "*"
        return response