vue-router

1.定义路由表

1.在 src 下创建 router 目录,并在目录里创建 index.js 文件

js 复制代码
    import { createRouter, createWebHashHistory } from "vue-router"
    const routes = [
        {
            // 路由地址
            path: "/",
            // 对应路由显示组件
            component: () => import("@/views/index.vue"),
        },
        {
            // 路由地址
            path: "/login",
            // 对应路由显示组件
            component: () => import("@/views/login.vue"),
        },
        {
            // 路由地址
            path: "/cart",
            // 对应路由显示组件
            component: () => import("@/views/cart.vue"),
        },
    ]
    // 使用 createRouter 创建路由实例
    const router = createRouter({
        // 确定路由模式,当前使用hash模式
        history: createWebHashHistory(),
        // 定义路由表
        routes
    });

    // 导出
    export default router;

2. 在 入口文件引入,并挂载

js 复制代码
    import { createApp } from "vue";
    import App from "./App.vue";

    // 1. 导入路由实例
    import router from './router'

    const myApp = createApp(App);

    // 2. 挂载路由实例
    myApp.use(router)

    myApp.mount("#app");

3.在组件上使用 router-view 展示路由

js 复制代码
    <template>
        <div>App 展示</div>
        <router-view></router-view>
    </template>

2.页面中使用路由

1.页面中进行路由跳转

1. 普通跳转

js 复制代码
    <template>
        <div>首页页面</div>

        <button @click="goPage">点击跳转</button>
    </template>

    <script>
        export default {
            methods: {
                goPage() {
                    this.$router.push('/login')
                }
            }
        }
    </script>

2. 替换当前页面

js 复制代码
    <template>
        <div>首页页面</div>

        <button @click="goPage">点击跳转</button>
    </template>

    <script>
        export default {
            methods: {
                goPage() {
                    // 从页面 a 到 页面 b 页面 不会在历史记录中新增数据
                    this.$router.replace('/login')
                }
            }
        }
    </script>

3. 路由传参

1.params 传参

js 复制代码
    <template>
        <div>首页页面</div>

        <button @click="goPage">点击跳转</button>
    </template>

    <script>
        export default {
            methods: {
                goPage() {
                    this.$router.push('/login/10086/张三')
                }
            }
        }
    </script>

接收参数

js 复制代码
    <template>
        <div>登录页面</div>
    </template>

    <script>
    export default {
        mounted() {
            /* 
                $router 是路由提供给我们的 方法集合
                        内部包含多个跳转的方法
                $route   是路由提供给我们的 数据集合
                        内部包含一些路由的信息,比如说传递过来的参数        
            */

            console.log(this.$route.params)
        }
    }
    </script>

2.query 传参

参数使用 ? 进行拼接,参数之间用 & 隔开,不需要在路由表中定义

js 复制代码
    <template>
        <div>首页页面</div>

        <button @click="goPage">点击跳转</button>
    </template>

    <script>
        export default {
            methods: {
                goPage() {
                    this.$router.push({
                        name:'login',
                        query:{
                            id: 10086,
                            name: '张三'
                        }
                    })
                }
            }
        }
    </script>
    
    
    // 接收参数
    this.$router.query 就是传递的参数

3.嵌套路由

点击顶栏导航按钮。页面跳转。导航栏保持不变。页面改变

js 复制代码
    import { createRouter, createWebHashHistory } from "vue-router"
    const routes = [
        {
            path: "/",
            name: '/',
            component: () => import("@/views/index.vue"),
        },
        {
            path: "/login",
            name: 'login',
            component: () => import("@/views/login.vue"),
        },
        {
            path: "/cart",
            name: 'cart',
            component: () => import("@/views/cart.vue"),
        },
        {
            path: "/banner",
            name: 'banner',
            component: () => import("@/views/banner/index.vue"),
            children:[
                {
                    path: "addImg",
                    name: 'addImg',
                    component: () => import("@/views/banner/components/addImg.vue"),
                },
                {
                    path: "imgList",
                    name: 'imgList',
                    component: () => import("@/views/banner/components/imgList.vue"),
                }
            ]
        },
    ]
    const router = createRouter({
        history: createWebHashHistory(),
        routes
    });


    export default router;
    
    
    // 在 banner 展示对应的 子路由
    <template>
        <div>轮播图展示页</div>
        <router-link to="/banner/imgList">跳转到轮播图列表</router-link>
        <router-link to="/banner/addImg">跳转到轮播图添加</router-link>
        
        <router-view></router-view>
    </template>

4. vue-router 的懒加载

Vue-router 的懒加载是指在路由被访问时才加载相应的组件,而不是在应用初始化时就加载所有的组件。这样可以提高应用的性能,减少初始加载时间。

在 Vue-router 中,可以使用 import() 函数来实现懒加载。懒加载的语法如下:

javascript 复制代码
component: () => import('./components/ExampleComponent.vue')

当路由被访问时,import() 函数会动态地加载相应的组件。这样可以将组件的代码分割成多个小块,只有在需要时才加载,而不是一次性加载所有的组件。

懒加载还可以通过 Webpack 的代码分割功能来实现。在 Webpack 的配置文件中,可以使用 import 函数的 webpackChunkName 注释来给生成的代码块命名,方便调试和管理。

总的来说,懒加载可以提高应用的性能,减少初始加载时间,提升用户体验。同时,懒加载也可以更好地管理和组织组件的代码,使项目结构更清晰。

5.路由守卫

beforeEach 是 Vue-router 中的一个导航守卫,用于在路由切换之前进行一些操作或者拦截导航。

在 Vue-router 中,可以通过 router.beforeEach 方法注册 beforeEach 导航守卫。它接收一个回调函数作为参数,这个回调函数会在每次路由切换之前被调用。

beforeEach 的回调函数接收三个参数:tofromnext。其中,to 表示即将进入的路由对象,from 表示即将离开的路由对象,next 是一个函数,用于控制路由的行为。

beforeEach 回调函数中,可以进行一些操作,比如检查用户是否已登录、权限验证、页面访问记录等。根据这些操作的结果,可以选择调用 next 函数来继续路由的导航,或者中断导航。

如果在 beforeEach 中调用 next 函数并传入参数,可以控制路由的行为。常见的参数有:

  • next():继续路由导航,进入下一个钩子或者路由组件。
  • next(false):中断路由导航,停留在当前路由。
  • next('/path'):中断当前导航,重定向到指定的路径。

通过使用 beforeEach 导航守卫,可以在路由切换之前进行一些操作,实现权限控制、页面访问记录等功能,提升应用的用户体验和安全性。

相关推荐
大杯咖啡4 分钟前
localStorage与sessionStorage的区别
前端·javascript
RaidenLiu15 分钟前
告别陷阱:精通Flutter Signals的生命周期、高级API与调试之道
前端·flutter·前端框架
非凡ghost16 分钟前
HWiNFO(专业系统信息检测工具)
前端·javascript·后端
非凡ghost18 分钟前
FireAlpaca(免费数字绘图软件)
前端·javascript·后端
非凡ghost24 分钟前
Sucrose Wallpaper Engine(动态壁纸管理工具)
前端·javascript·后端
拉不动的猪26 分钟前
为什么不建议项目里用延时器作为规定时间内的业务操作
前端·javascript·vue.js
该用户已不存在33 分钟前
Gemini CLI 扩展,把Nano Banana 搬到终端
前端·后端·ai编程
地方地方34 分钟前
前端踩坑记:解决图片与 Div 换行间隙的隐藏元凶
前端·javascript
炒米233337 分钟前
【Array】数组的方法
javascript
jason_yang38 分钟前
vue3+element-plus按需自动导入-正确姿势
vue.js·vite·element