Vue3_路由

路由传参

<！-- News.vue-->
<template>
    <div>
        <ul>
            <li v-for="news in list" :key="news.id">
                <RouterLink 
                    :to="{
                        name:'ccb',   // params传参时，这个地方只能写路由组件的名称
                        params:{
                            id : news.id,
                            title: news.title 
                        }
                    }">
                    {{ news.title }}
                </RouterLink>
            </li>
        </ul>
        
        <div style="border: 1px solid red; width: 500px; height: 400px;">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router';
</script>

<!-- Detail.vue-->
<template>
    {{id}}
    {{title}}
</template>

<script setup lang="ts">
	defineProps(['id', 'title'])
</script>

路由守卫

import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
import Login from '@/components/Login.vue'

const router = createRouter({
    history: createWebHistory(),
    routes:[
        {
            name:'News',
            path:'/news',
            component:News,
            meta:{'required':true},   // 加一个标识，标识该组件需要登录后才能访问
        },
        {
            name:'Login',
            path:'/login',
            component:Login
        }
    ]
})

router.beforeEach((to, from, next) => {
    let flag = localStorage.getItem("token")

    if(to.meta.required && !flag){
        next({name:'Login'})
    }
    else{
        next()
    }
  })

router.afterEach((to, from) =>{
    console.log('后置拦截')
})
export default router