vue3.0中的路由及路由守卫

• 首先说明一点，以上是自己总结的，有不对的地方，欢迎小伙伴们可以指出来

• 1、vue3.0中的路由将vue2.0中的路由有的API进行了删除，有的进行了修改

• tag是我们可以改变标签的属性进行了删除，event也删除了
• exact也进行了删除
• 全局的404不再使用*键了，文档有可查看
• 那么有的小伙伴说都删除了，我们应该使用什么呢？那肯定是有的，想了解的朋友可以去官方看看文档，我看了下，有一个新增的API就是v-slot，具体怎么使用，需要稍等会，正在努力研究中
• 还有我们的组件路由守卫中的beforeRouteEnter进行了删除（我是没找到，希望看到的小伙伴可以告诉我，谢谢）
• 新增的两个API是我们经常会使用到的，很有用useRouter,useRoute后面会介绍到，别慌

• 2、先看下简单的语法，跟vue2.0的一样

<router-link to="/">首页</router-link>
<router-view></router-view>//要在哪里显示路由页面，就在哪里进行标签的书写

• 3、创建一个router.js路由文件

import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
          {
              path:"/",
              name:"home",
              component:()=>import("../views/home.vue")
          }
        ]
const router = createRouter({
  history: createWebHashHistory(),
  routes
});
export default router;
//在main.js中进行引入，并进行挂载注册到全局上

• 4、query和params进行传参

• params传参要在路由的js文件中进行配置

    const routes = [
        {
            path:'/home/:id',//这个id就是我们要使用params进行动态传递的参数
            name:home,
            component:Home
        }
    ]
    //! 在我们的页面中直接进行写就可以了
    <router-link to="/home/111">点击跳转到home页面并传参</router-link>
    //接受的时候
    vue2.0中this.$route.params.id
    vue3.0中import { useRoute } from 'vue-router'
    const route = useRoute()
    console.log(route.params.id);//111

• query传参可以直接在标签上写

    <router-link to="/test?id=999">test</router-link>
    //接受的时候
    vue2.0中this.$route.query.id
    vue3.0中import { useRoute } from 'vue-router'
    const route = useRoute()
    console.log(route.query.id);//999

• 编程式导航的传参，params使用name,query使用path

    vue3.0中import { useRouter } from 'vue-router'
    const route = useRouter()
        // ! query编程式导航传参
            route.push({
                path:"/lianxi",
                query:{
                    id:666
                }
            });
            //! params编程式导航传参
            route.push({
                name:'lianxi',
                params:{
                    id:666
                }
            });
            接受参数的方法跟上面的一样
    vue3.0中import { useRoute } from 'vue-router'
    const route = useRoute()
    console.log(route.query.id);//999

• 注意：上面的编程式导航用到了上面提到的两个API，一个是我们需要进行设置的，一个是我们用来读取的

就像vue2.0中的this.$router.push()和this.$route.query.id等是不是很像呢

• 5、replaceApi

<router-link to="/home" replace></router-link>

route.push({
    path:"/home",
    replace:true
})

• 6、命名视图

<router-view name="LeftSidebar"></router-view>
<router-view></router-view>
<router-view name="RightSidebar"></router-view>
//在路由的设置js文件中进行配置下
 const route = [
     {
         path:"/home",
         name:"home",
         components:{
             default:Home,//默认显示home页面
             LeftSidebar:LeftSidebar,//显示左侧页面
             RightSidebar//显示右侧页面
         }
     }
 ]

• 7、重定向和别名（可以有多个别名）

    route = [
        {
            path:"/",
            redirect:"/home"//重定向
        },
        {
            path:"/test",
            name:"test",
            component:Test,
            alias:"/aa",//别名使用时直接使用aa就可以了
            alias:["/aa","/cc"],//此时用哪个都可以，这是多个别名
        }
    ]
    <router-link to="/aa"></router-link>

• 8、可以使用props的形式进行获取路由传递的参数，这样使路由有很好的一个灵活性

    //在路由配置的组件中，我们进行配置
    const routes = [
        {
            path:"/aa/:id",
            name:"aa",
            component:Aa,
            props:true//要加这个
        }
    ]
    //在页面中
    <router-link to= "/aa/666">点击跳转并传参</router-link>
    //在aa的页面中
    props:['id'],
    <template>
        {{id}}//直接就能获取到我们传递过来的参数
    </template>

• 9、要是有多个命名视图的时候，props也要写多个

    const routes = [
        {
            path:"/use/:id",
            name:"use",
            components:{
                default:Use,
                slide:Slide,
                rightSlide
            },
            props:{
                default:true,
                slide:false,
                rightSlide:false
            }
        }
    ]

• 10、全局路由守卫（vue-router4.0中将next取消了，可写可不写，return false取消导航，undefined或者是return true验证导航通过）

• router.beforeEach((to,from)=>{}),next是可选参数，可写可不写，return false是取消导航，如果返回值为true或者是undefined意味着通过验证
• router.afterEach((to,from)=>{})
• console.log(to.fullPath);//1可以直接将当前的URL路径及传参打印出来

• 11、路由独享

    const routes = [
        {
            path:"/home",
            name:"home",
            component:Home,
            beforeEnter:(to,from) =>{
                //to是当用户点击进入当前页面的时候,我们可以进行一些拦截设置
                //from当来自其他页面进入当前页面的时候，我们也可以进行拦截提示用户
                alert('我是路由独享守卫！！！')
            }
        }
    ]

• 12、组件中的路由守卫

import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
        onBeforeRouteUpdate((to,from)=>{//当前组件路由改变后，进行触发
            console.log(to);
        })
        onBeforeRouteLeave((to,from)=>{//离开当前的组件，触发
            alert('我离开啦')
        })

• 13、新增的一些方法（或者是之前就有的，而我没有注意到）

• addRoute：新添加路由页面(也可以添加子页面路由)
• 添加一级路由

// todo 这是新添加的路由页面，如果有重复的属性，会先删除前面的，添加后面的路由页面
router.addRoute({
  path:"/router",
  name:"router",
  component:()=>import('../views/router.vue')
})

• 添加二级路由

// 1 添加子路由，第一个参数是父路由的name名，后面是子路由的数据
router.addRoute({ name: 'admin', path: '/admin', component: Admin })//1 父路由
router.addRoute('admin', { path: 'settings', component: AdminSettings })//1 子路由

• 如果添加的路由有点问题，可以将下面的这句代码加上看看

// * 如果上面添加的路由页面没有变化，那么就添加这行代码
router.replace(router.currentRoute.value.fullPath)//替换当前路由页面的路由

• removeRoute：删除路由

router.removeRoute('router');

• 14、官方文档中介绍了<router-link><router-view>中使用v-slot的写法，目前研究中，有会的大佬，请教教我，万分感谢！！！