<router-view/>，显示组件，位置在router/index.js中配置，提供的
<router-link :to="about_url">作业面跳转

写一个页面组件
配置访问某个路径显示这个页面组件

<router-link :to="about_url">
      <button>点我跳到about标签的跳转</button>
</router-link>
    
<router-link to="/about">
          <button>点我跳到about标签的跳转</button>
</router-link>

this.$router.push('/about')

this.$router.push({name: 'about'})#通过地址的别名
this.$router.push({path: '/about'})# 通过地址

this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由
this.$router.go(-1): 请求(返回)上一个记录路由
this.$router.go(1): 请求下一个记录路由

<router-link to="/userinfo?user_id=9">
<router-link :to="{name:userinfo,query:{user_id:88}}">

this.$router.push("/userinfo?user_id=9")
this.$router.push({name:userinfo,query:{user_id:88}})

this.$route.query.user_id

<router-link to="/userinfo/88/lqz">
<router-link :to="{name:userinfo,params:{id:88,name:lqz}}">

this.$router.push("/userinfo/88/lqz")
this.$router.push({name:userinfo,params:{id:88,name:lqz}})

this.$route.params.id

1.构建出骨架，以后想点击只要这个位置变，就放一个<router-view/>
2.IndexView和OrderView正常写

 {
        path: '/',
        name: 'home',
        component: HomeView,
        children: [ //通过children配置子级路由
            {
                path: 'index', //此处一定不要写：/news
                component: IndexView
            },
            {
                path: 'order',//此处一定不要写：/message
                component: OrderView
            }
        ]
    },

// 该文件专门用于创建整个应用的路由器（router下的index.js）
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
const router =  new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About,
            meta:{title:'关于'}
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{title:'主页'},
            children:[
                {
                    name:'xinwen',
                    path:'news',
                    component:News,
                    meta:{isAuth:true,title:'新闻'}
                },
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    meta:{isAuth:true,title:'消息'},
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,
                            meta:{isAuth:true,title:'详情'},

                            //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
                            // props:{a:1,b:'hello'}

                            //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
                            // props:true

                            //props的第三种写法，值为函数
                            props($route){
                                return {
                                    id:$route.query.id,
                                    title:$route.query.title,
                                    a:1,
                                    b:'hello'
                                }
                            }

                        }
                    ]
                }
            ]
        }
    ]
})

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
    console.log('前置路由守卫',to,from)
    if(to.meta.isAuth){ //判断是否需要鉴权
        if(localStorage.getItem('name')==='lqz'){
            next()
        }else{
            alert('名不对，无权限查看！')
        }
    }else{
        next()
    }
})

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
    console.log('后置路由守卫',to,from)
    document.title = to.meta.title || 'lqz系统'
})

export default router

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
const router =  new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About,
            meta:{title:'关于'}
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{title:'主页'},
            children:[
                {
                    name:'xinwen',
                    path:'news',
                    component:News,
                    meta:{isAuth:true,title:'新闻'}
                },
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    meta:{isAuth:true,title:'消息'},
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,
                            meta:{isAuth:true,title:'详情'},

                            //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
                            // props:{a:1,b:'hello'}

                            //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
                            // props:true

                            //props的第三种写法，值为函数
                            props($route){
                                return {
                                    id:$route.query.id,
                                    title:$route.query.title,
                                    a:1,
                                    b:'hello'
                                }
                            }

                        }
                    ]
                }
            ]
        }
    ]
})

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
    console.log('前置路由守卫',to,from)
    if(to.meta.isAuth){ //判断是否需要鉴权
        if(localStorage.getItem('name')==='lqz'){
            next()
        }else{
            alert('名不对，无权限查看！')
        }
    }else{
        next()
    }
})

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
    console.log('后置路由守卫',to,from)
    document.title = to.meta.title || 'lqz系统'
})

export default router

//进入守卫：通过路由规则，进入该组件时被调用
   beforeRouteEnter (to, from, next) {
   },
   //离开守卫：通过路由规则，离开该组件时被调用
   beforeRouteLeave (to, from, next) {
   }


    //通过路由规则，进入该组件时被调用
        beforeRouteEnter (to, from, next) {
            console.log('About--beforeRouteEnter',to,from)
            if(to.meta.isAuth){ //判断是否需要鉴权
                if(localStorage.getItem('school')==='atguigu'){
                    next()
                }else{
                    alert('学校名不对，无权限查看！')
                }
            }else{
                next()
            }
        },

        //通过路由规则，离开该组件时被调用
        beforeRouteLeave (to, from, next) {
            console.log('About--beforeRouteLeave',to,from)
            next()
        }

1 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
2 hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
3 hash模式：
地址中永远带着#号，不美观 。
若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
兼容性较好。
4 history模式：
地址干净，美观 。
兼容性和hash模式相比略差。
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题

可以放到cookie中，cookie有过期时间，一旦过期就清理了
可以当到localStorage，永久存储，除非使用代码删除，清理浏览器
可以存到sessionStorage，关闭浏览器就没了

存：
    var obj = {"name":"xiaoming","age":"16"}
    localStorage.setItem("userInfo",JSON.stringify(obj));
取：
    var user = JSON.parse(localStorage.getItem("userInfo"))
删除：
    localStorage.remove("userInfo);
清空：
    localStorage.clear();

savesessionStorage() {
     
      var userinfo = {'name': 'lqz', 'age': 19}
      sessionStorage.setItem('userinfo', JSON.stringify(userinfo))
    },
    getsessionStorage() {
      var res = JSON.parse(sessionStorage.getItem('userinfo'))
      console.log(res)
    },
    deletesessionStorage() {
      sessionStorage.clear()
      sessionStorage.removeItem('username')
    },

使用js-cookie工具：

1.npm i js-cookie //安装
2.import Cookies from 'js-cookie' //引用

// 存入cookie：
Cookies.set('token','value')

// 获取cookie：
Cookies.get('token')

//删除cookie:
Cookies.remove('token')

使用Proxy代替defineProperty实现响应式

重写虚拟DOM的实现和Tree-Shaking

Vue3可以更好的支持TypeScript
兼容JavaScript

Composition API（组合API）

    setup配置
    ref与reactive
    watch与watchEffect
    provide与inject
新的内置组件

    Fragment
    Teleport
    Suspense
其他改变

    新的生命周期钩子
　　data 选项应始终被声明为一个函数
    移除keyCode支持作为 v-on 的修饰符

export default {
        data(){
            name:ss
        }
        mehtods:{
            console.log(name)
        }
    }

setup{
        var name =ss
        console.log(name)
    }

本栏目推荐文章
• 代码随想录 day18 找树左下角的值 路径总和 从中序与后序遍历序列构造二叉树
• Scala编程语言day1
• 2024-1-13 DAY4
• 本地套接字 [补档-2023-07-24]
• UDP通信 [补档-2023-07-22]
• 多路io复用Select [补档-2023-07-16]
• 多路io复用pool [补档-2023-07-19]
• 多路io复用epoll [补档-2023-07-20]
• 算法学习Day26组合总和、分割回文串
• socket编程 [补档-2023-07-10]

vue-day vue day 07vue-day vue day 07 vue-day 周期vue-day生命vue vue-day vue day 37 computed vue-day watch vue 表单vue-day数据vue 原理vue-day数据vue 组件vue-day vue day 指令vue-day vue day 条件vue-day vue day