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) {
    // 在导航离开渲染该组件的对应路由时调用,可以访问组件实例
  },
相关推荐
2301_803554525 小时前
实习项目包装--HTTP 协议和 Web API
前端·网络协议·http
lssjzmn5 小时前
Spring Web 异步响应实战:从 CompletableFuture 到 ResponseBodyEmitter 的全链路优化
java·前端·后端·springboot·异步·接口优化
这里有鱼汤5 小时前
上班族没时间炒股?不妨试试这个隔夜超短战法(附:Python量化源码)
前端
n12352355 小时前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
前端 贾公子5 小时前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐5 小时前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui
前端小万5 小时前
一次紧急的现场性能问题排查
前端·性能优化
zhangzuying10265 小时前
基于Vue3 +ElementuiPlus + Dexie.js自研的浏览器插件新建标签页tab
vue.js·typescript·echarts
lichong9515 小时前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之video 的各种状态和生命周期调用说明
android·vue.js·macos
excel5 小时前
为什么相同卷积代码在不同层学到的特征完全不同——基于 tfjs-node 猫图像识别示例的逐层解析
前端