vue-router 4用法实战

引入

npm install vue-router@next

使用

首先入口文件

// main.js
// vue-router是以插件的形式存在的，以前是use vueRouter本身而现在use是实例的方法

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

const router = createRouter({
    // 以前是mode选项
    history: createWebHistory() // history模式(函数还有选项)
    history: createMemoryHistory() // 内存模式用于服务端渲染在后台服务中使用(函数还有选项)
    history: createWebHashHistory() // hash模式(函数还有选项)
    routers:[
        {path:'/', component:comp1},
    ]
})

createApp(App)
    .use(router)
    .mount('#app')

特性：动态路由

router.addRoute({
    path: '/about',
    name: 'about',
    component: () => import('./about.vue')
})
// 创建about的子路由
router.addRoute('about', {
    path: '/about/info',
    name: 'info',
    component: {
        render(){
            retturn h('div', 'info page')
        }
    }
})

组件中使用

import { reactive, toRefs } from 'vue'
import { useRouter,useRoute,onBeforeRouteLeave } from 'vue-router'

setup(){
    const data1 = reactive({count:1})
    // 获取路由器实例
    const router = useRouter()
    
    // route是响应式对象，可监控其变化
    const route = useRoute()
    watch(() => route.query, (query) =>{
        console.log(query)
    })
    
    // 守卫(通过return判断是否跳转)
    onBeforeRouteLeave((to, from) => {
        const answer = window.confirm('确定离开页面？')
        if(!answer){
            return false
        }
    })
    
    return{
        ...toRefs(data1),
        goBack(){
            router.push('/')
        }
    }
}
    

对导航链接做深层次包装

<template>
    <div :class="{active: isActive}" @click="navigate">
    {{route.name}}
    </div>
</template>

<srcipt>
import {RouterLink, useLink} from 'vue-router'

export default {
    props: {
        // 对RouterLink进行拓展
        ...RouterLink.props,
        // 外部自己穿的属性
        customClass: String,
    }，
    setup(props){
        // 获取RouterLink内部属性和方法
        const { route, href ,isActtive, isExactActive, navigate } = useLink(props)
        
        return { route ,isActtive, navigate }
    }
}
<srcipt>