vue-router的使用技巧

一、安装

npm install vue-router

二、引入

main.ts引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)app.use(router)
app.mount('#app')

三、定义路由文件

路由的参数

meta添加路由的其他参数

redirect: '/emit', //重定向

alias: ['/jx', '/jx1', '/jx2'],//别名

children: []//子路由

import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'declare module 'vue-router' {interface RouteMeta {title: string}
}const routes: Array<RouteRecordRaw> = [{path: '/',name: 'component',meta: {title: '123'},component: () => import('../view/App_component.vue'),children: [{path: '/emit',components: {default: () => import('../view/App_emit.vue')}},{path: '/define',components: {aaa: () => import('../view/App_define.vue')}},{path: '/tsx',components: {default: () => import('../view/App_tsx')}}]}
]const router = createRouter({history: createWebHistory(),routes
})export default router

路由模式的原理

//createWebHashHistory
/*** 原理window.addEventListener('hashchange',(e)=>{console.log(e)})* location.hash = '/bus'*///createWebHistory
/*** 原理window.addEventListener('popstate',(e)=>{console.log(e)})* history.pushState({}, '', '/bus')*/

记录页面滚动条的位置

scrollBehavior

const router = createRouter({history: createWebHistory(),scrollBehavior: (to, from, save) => { //记录页面的滚动条位置console.log(save);if (save) {return save} else {return {top: 0}}},routes
})

四、使用

RouterLink跳转，添加replace不记录历史

RouterView显示路由对应的界面

<template><!-- <RouterLink to="/">component</RouterLink><RouterLink to="/bus">bus</RouterLink> --><!-- <RouterLink :to="{name:'component'}">component</RouterLink><RouterLink :to="{name:'bus'}">bus</RouterLink> --><!-- <div>replace 不记录历史<RouterLink replace to="/">component</RouterLink><RouterLink replace to="/bus">bus</RouterLink></div> --><RouterView></RouterView>
</template>

js跳转页面

router.push({path: '/index'})

path就是路由对应的url

router.push({name: 'index'})

name就是路由对应的name

router.push({path: '/index',query:{id:'123'}})

query传参，不需要处理路由

router.push({path: '/index',params:{id:'123'}})

params传参，需要修改路由添加对应参数

例如：path: '/index/:id/:name'

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter();
const goUrl = (url: string, name: string) => {// router.push({//   path: url// })// router.push({//   name// })//不记录历史// router.replace(url)// router.go(1); //前进// router.back(); //后退//传参// router.push({//   path: url,//   query: {//     name: 'cqs',//     age: 123//   }// })// 传参router.push({name,params: {name: 'cqs',age: 123}})
}
</script>

五、导航守卫

全局导航守卫

let whileList = ['/', '/bus'];
router.beforeEach((to, from, next) => {window.document.title = to.meta.title;if (whileList.includes(to.path)) {next()} else {router.push('/')}
})router.beforeResolve((to, from)=>{})router.afterEach((to, from) => {})

路由独享守卫

beforeEnter: (to, from) => {},

组件内守卫

beforeRouteEnter(to, from) {// 不能获取组件实例},beforeRouteUpdate(to, from) {// 组件已经挂载好了，导航守卫可以访问组件实例},beforeRouteLeave(to, from) {// 在导航离开渲染该组件的对应路由时调用，可以访问组件实例},