3.2导航 路由守卫

$router：一般用于在编程式导航进行路由跳转（push/replace）
$route：一般用于获取路由信息，如路径、query、params

<!--Home.vue-->
<template>
<div></div>

 <router-link :to="{path: 'homechild'}">homechild ||</router-link>
<router-link :to="{path: 'home1'}">home1 ||</router-link>
<button @click="handleHello">about</button>
<router-view></router-view>
</template>

<script  setup>

import { useRouter } from 'vue-router'
  
  const routers=useRouter()

  const handleHello=()=>{
    routers.push({path:'/about',query:{id:1}})
  }

 
// const router = useRouter()


//直接在script标签上添加setup属性
//...

</script>

<style scoped>
  .router-link.active{
      color:red;
  }
</style>

<template>
About
</template>

<script setup>
 import { useRoute } from 'vue-router';
 const route= useRoute();
 const id= route.query
 console.log("id=",id)
 

 


</script>

<style scoped>

</style>

params 形式

如果我们不想污染浏览器查询字符串，但又想通过路由传参，params 是最好的选择。

//如果使用 params 的形式传参，在目标页面 About.vue 手动刷新的话，就拿不到 params 参数了

<router-link  :to="{name:'about',params:{id:1}}" >about_outer-view</router-link>

<template>
About
</template>

<script setup>
 import { useRoute } from 'vue-router';
 const route= useRoute();
 const id= route.query
 //routers.push
 console.log("id=",id)
 //router-link :to="{name:'about',params:{id:1}}" 
 console.log(route.params)

 


</script>

<style scoped>

</style>

beforeEach 和 afterEach

beforeEach 和 afterEach 方法接收一个回调函数，回调函数内可以通过 router.currentRoute拿到当前的路径参数，所以在这里可以监听到路由的变化

<!--Home.vue-->
<template>
<div></div>

 <router-link :to="{path: 'homechild'}">homechild ||</router-link>
<router-link :to="{path: 'home1'}">home1 ||</router-link>
<button @click="handleHello">about</button>
<!-- <router-link ></router-link> -->
<router-link  :to="{name:'about',params:{id:1}}" >about_outer-view</router-link>
</template>

<script  setup>

import { useRouter } from 'vue-router'
  
  const routers=useRouter()

  const handleHello=()=>{
    routers.push({path:'/about',query:{id:1}})
  }
  routers.afterEach(
    ()=>{
      console.log('path::',routers.currentRoute.value)
    }
  )

 
// const router = useRouter()


//直接在script标签上添加setup属性
//...

</script>

<style scoped>
  .router-link.active{
      color:red;
  }
</style>

afterEach  常用登录鉴权

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import Home from '../components/Home.vue'
import NotFound from '../components/NotFound.vue'
const router = createRouter({
  history: createWebHashHistory(), // createWebHashHistory 为哈希模式的路由，如果需要选择 histiry 模式，可以用 createWebHistory 方法。
  routes: [ // routes 属性和 vue-router 3.0 的配置一样，通过数组对象的形式，配置路径对应展示的组件。
    {
             //alias: '/home'  别名
      path: '/',
      component: () => import('../components/Home.vue'),
      children:[
        {
          path: 'homechild',
          name: 'homechild',
          component: () => import('../components/Homechild.vue'),
    
        },
        {
          path: 'home1',
          name: 'home1',
          component: () => import('../components/Home1.vue'),
    
        },
      ]
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../components/About.vue'),
      
     
    
    },
  
    { //404
      path: '/:pathMatch(.*)*',
      name: 'notFound',
      component: NotFound
    }


  ]
})

//动态添加路由
const home1 = {
  path: "/home1",
  component: () => import("../components/Home1.vue")
}

router.beforeEach((to,from,next)=>{
  console.log(to);
  console.log(from);
  next();
})

//通过router.addRoute()动态添加
router.addRoute(home1);

export default router

如果要进入就是管理员页面；
用户user等于必须等于admin。才能够进入
否者不能够就进入页面，并提示弹窗
let user='user'
// to==>到哪一个路由，
// form ==> 来源哪一个路由，
// next是否允许前往某一个路由，如果没有执行next()这页面空白
router.beforeEach((to, form, next) => {
    console.log(' to',to);

    if (to.path == '管理员页面') {
        if (user == 'admin') {
            next();
        } else {
            alert('你不是管理员')
        }
    } else {
        next()
    }
})