5.Vue3的学习---52024-08-15

6.Vue3的学习---62024-08-16 7.Vue3的学习---72024-08-23 8.Vue3的学习---82024-08-24 9.Vue3的学习---92024-08-27 10.Vue3的学习---102024-08-27 11.Vue3的学习---112024-08-29 12.Vue3的学习---122024-09-02

5.路由

5.1 Vue路由

5.1.1 Vue路由基础

Vue路由实例：

<body>
    <div id="app">
        <p>
            <!-- 这里使用router-link标签来实现路由跳转 -->
            <router-link to="/home">首页</router-link><br>
            <router-link to="/about">关于</router-link>
        </p>
        <!-- 路由出口（这里显示路由的内容） -->
        <router-view></router-view>
    </div>

    <script src="../js/vue3.js"></script>
    <script src="../js/vue-router.js"></script>
    <script>
        // 1、定义路由组件
        const Home = {
            template: '<div>首页</div>'
        }
        const About = {
            template: '<div>关于</div>'
        }

        // 2、定义路由规则（每一个路径映射一个路由组件）
        const routes = [
            {
                path: '/home',
                component: Home
            }, {
                path: '/about',
                component: About
            }
        ]

        // 3、创建Vue路由实例
        const router = VueRouter.createRouter({
            // 配置路由模式
            history: VueRouter.createWebHashHistory(),
            // 配置路由规则（如果路由规则名为routes，那么可以简写为：routes）
            routes: routes
        })

        // 4、将路由对象挂载到Vue实例上
        Vue.createApp({

        }).use(router).mount('#app')
    </script>
</body>

5.1.2 嵌套路由

<body>
    <div id="app">
        <div>
            <p>
                <router-link to="/home">首页</router-link><br>
                <router-link to="/about">关于</router-link>
            </p>
            <router-view></router-view>
        </div>
    </div>

    <script src="../js/vue3.js"></script>
    <script src="../js/vue-router.js"></script>
    <script>
        const Home = {
            template: `<div>
                        <p>首页</p>
                        <router-link to="/home/login">登录</router-link><br>
                        <router-link to="/home/register">注册</router-link>
                        <router-view></router-view>
                    </div>`
        }
        const About = {
            template: '<div>关于</div>'
        }
        const Login = {
            template: '<div>登录</div>'
        }
        const Register = {
            template: '<div>注册</div>'
        }

        const routes = [
            {
                path: '/',
                redirect: '/home'
            }, {
                path: '/home',
                component: Home,
                children: [
                    {
                        path: '/home',
                        redirect: '/home/login'
                    }, {
                        path: '/home/login',
                        component: Login
                    }, {
                        path : '/home/register',
                        component: Register
                    }
                ]
            }, {
                path: '/about',
                component: About
            }
        ]

        const router = VueRouter.createRouter({
            history: VueRouter.createWebHashHistory(),
            routes
        })

        Vue.createApp({

        }).use(router).mount('#app')
    </script>
</body>

5.1.3 路由传参

5.1.3.1 params形式传参

params 形式传参是 Vue Router 中一种通过 URL 传递参数的方式。具体来说，它允许你在路由路径中定义参数，并在导航时通过这些参数传递数据。这种方式通常用于动态路由，其中路由路径的一部分是可变的。

<body>
    <div id="app">
        <p>
            <router-link to="/home">首页</router-link><br>
            <router-link :to="{ name: 'About', params: { id: userID, name: userName } }">关于</router-link>
        </p>
        <router-view></router-view>
    </div>

    <script src="../js/vue3.js"></script>
    <script src="../js/vue-router.js"></script>
    <script>
        const Home = {
            template: '<div>首页</div>'
        }
        const About = {
            template: `<div>
                        关于<br>
                        参数1：{{ $route.params.id }}<br>
                        参数2：{{ $route.params.name }}
                    </div>`,
            props: ['id', 'name']
        }

        const routes = [
            {
                path: '/',
                redirect: Home
            }, {
                path: '/home',
                name: 'Home',
                component: Home,
                props: true
            }, {
                path: '/about/:id/:name',  // 明确定义参数 id 和 name
                name: 'About',
                component: About,
                props: true
            }
        ]

        const router = VueRouter.createRouter({
            history: VueRouter.createWebHashHistory(),
            routes
        })

        Vue.createApp({
            data() {
                return {
                    userID: 123,
                    userName: '张三'
                }
            }
        }).use(router).mount('#app')
    </script>
</body>

5.1.3.2 query形式传参

query 形式传参是 Vue Router 中另一种通过 URL 传递参数的方式。与 params 形式不同，query 参数是通过 URL 的查询字符串（query string）传递的，通常显示在 URL 的问号后面，例如 http://example.com/about?id=123&name=张三。

<body>
    <div id="app">
        <p>
            <router-link to="/home">首页</router-link><br>
            <router-link :to="{ path: '/about', query: {id: userID, name: userName} }">关于</router-link>
        </p>
        <router-view></router-view>
    </div>

    <script src="../js/vue3.js"></script>
    <script src="../js/vue-router.js"></script>
    <script>
        const Home = {
            template: `<div>首页</div>`
        }
        const About = {
            template: `<div>
                        关于<br>
                        参数1：{{ $route.query.id }}<br>
                        参数2：{{ $route.query.name }}
                    </div>`
        }

        const routes = [
            {
                path: '/',
                redirect: '/home',
            },
            {
                path: '/home',
                component: Home
            },
            {
                path: '/about',
                component: About
            }
        ]

        const router = VueRouter.createRouter({
            history: VueRouter.createWebHashHistory(),
            routes
        })

        Vue.createApp({
            data() {
                return {
                    userName: '张三',
                    userID: 123
                }
            }
        }).use(router).mount('#app')
    </script>
</body>

5.1.3.3 params方式与query的区别

params 和 query 是 Vue Router 中两种不同的传参方式，它们在用法和表现上有一些显著的区别：

URL 结构

params 传参：
- 参数直接嵌入在路径中，例如 /about/123/张三。
- URL 结构为 /about/:id/:name。
- 参数是路径的一部分，不可省略。
query 传参：
- 参数通过查询字符串传递，例如 /about?id=123&name=张三。
- URL 结构为 /about，参数附加在 URL 后面，用问号 ? 分隔。
- 参数是可选的，可以省略。

定义方式

params 传参：
- 在路由配置中定义路径参数，例如 path: '/about/:id/:name'。
- 在导航时通过 params 属性传递参数，例如 :to="{ name: 'About', params: { id: userID, name: userName } }"。
query 传参：
- 在路由配置中不需要定义参数。
- 在导航时通过 query 属性传递参数，例如 :to="{ name: 'About', query: { id: userID, name: userName } }"。

访问方式

params 传参：
- 在组件中通过 $route.params 访问参数，例如 {{ $route.params.id }}。
query 传参：
- 在组件中通过 $route.query 访问参数，例如 {{ $route.query.id }}。

参数的可见性和可变性

params 传参：
- 参数直接显示在 URL 中，用户可以直接看到和修改。
- 参数是路径的一部分，不可省略，且必须与路径定义匹配。
query 传参：
- 参数显示在 URL 的查询字符串中，用户也可以看到和修改。
- 参数是可选的，可以省略，且不需要与路径定义匹配。

适用场景

params 传参：
- 适用于需要将参数作为路径一部分的场景，例如动态路由、资源标识等。
- 参数是路径的一部分，不可省略，适用于必须传递参数的场景。
query 传参：
- 适用于可选参数、过滤条件、排序等场景。
- 参数是可选的，可以省略，适用于参数不是必须的场景。

5.1.3.4 restful风格传参

如果我们即想使用params方式传参，又不想在刷新是丢失参数，那么我们可以使用restful风格传参。

<body>
    <div id="app">
        <p>
            <router-link to="/home">首页</router-link><br>
            <router-link to="/about/123/'张三'">关于</router-link>
        </p>
        <router-view></router-view>
    </div>

    <script src="../js/vue3.js"></script>
    <script src="../js/vue-router.js"></script>
    <script>
        const Home = {
            template: '<div>首页</div>'
        }
        const About = {
            template: `<div>
                        关于<br>
                        ID: {{ $route.params.id }}<br>
                        姓名: {{ $route.params.name }}
                    </div>`
        }

        const routes = [
            {
                path: '/',
                redirect: '/home'
            }, {
                path: '/home',
                name: Home,
                component: Home
            }, {
                path: '/about/:id/:name',
                name: About,
                component: About
            }
        ]

        const router = VueRouter.createRouter({
            history: VueRouter.createWebHashHistory(),
            routes
        })

        Vue.createApp({

        }).use(router).mount('#app')
    </script>
</body>

5.2 编程式路由

编程式路由是指在Web应用中通过编写代码来实现页面之间的导航，而不是通过用户点击链接（如<a>标签）来实现。这种方式允许开发者根据应用的逻辑和状态来控制导航行为，从而实现更复杂和动态的用户体验。

编程式路由的主要用途：

条件导航：根据应用的状态或用户的操作来决定导航到哪个页面。
动态参数传递：在导航时传递动态参数，如用户ID、查询参数等。
前进和后退：实现页面的前进和后退功能，类似于浏览器的前进和后退按钮。
重定向：根据某些条件自动重定向用户到不同的页面。

5.2.1 利用JS实现路由转跳

<body>
    <div id="app">
        <button @click="toHome">首页</button>
        <button @click="toAbout">关于</button>
        <button @click="toLogin">登录</button><br>
        <button @click="toForward">前进</button>
        <button @click="toBack">后退</button>
        <router-view></router-view>
    </div>

    <script src="../js/vue3.js"></script>
    <script src="../js/vue-router.js"></script>
    <script>
        const Home = {
            template: '<div>首页</div>'
        }
        const About = {
            template: `<div>
                        关于<br>
                        ID: {{ $route.query.id }}<br>
                        name: {{ $route.query.name }}
                    </div>`
        }
        const Login = {
            template: '<div>登录</div>'
        }

        const routes = [
            {
                path:'/',
                redirect:'/home'
            }, {
                path:'/home',
                component: Home
            }, {
                path:'/about',
                component: About
            }, {
                path:'/login',
                component: Login
            }
        ]

        const router = VueRouter.createRouter({
            history: VueRouter.createWebHashHistory(),
            routes
        })

        Vue.createApp({
            data() {
                return {
                    userID: 123,
                    userName: '张三'
                }
            },
            methods: {
                toHome() {
                    this.$router.push('/home')
                },
                toAbout() {
                    this.$router.push({path:'/about', query: {id: this.userID, name: this.userName}})
                },
                toLogin() {
                    this.$router.push('/login')
                },
                toForward() {
                    // this.$router.forward()
                    this.$router.go(1)
                },
                toBack() {
                    // this.$router.back()
                    this.$router.go(-1)
                }
            }
        }).use(router).mount('#app')
    </script>
</body>

5.2.2 通过watch实现路由监听

通过watch属性设置监听$route变化，达到监听路由跳转的目的。

<body>
    <div id="app">
        <router-link to="/home">首页</router-link><br>
        <router-link to="/about">关于</router-link>
        <router-view></router-view>
    </div>

    <script src="../js/vue3.js"></script>
    <script src="../js/vue-router.js"></script>
    <script>
        const Home = { template: '<div>首页</div>' }
        const About = { template: '<div>关于</div>' }

        const routes = [
            { path: '/', redirect: '/home' },
            { path: '/home', component: Home },
            { path: '/about', component: About }
        ]

        const router = VueRouter.createRouter({
            history: VueRouter.createWebHashHistory(),
            routes
        })

        Vue.createApp({
            // 路由监听
            watch: {
                $route(newRoute, oldRoute) {
                    console.log(newRoute, oldRoute)
                }
            }
        }).use(router).mount('#app')
    </script>
</body>

5.2.3 导航守卫

路由守卫（Route Guards）是用于控制路由访问权限的一种机制，它们可以在导航到某个路由之前、之后或过程中执行一些逻辑，比如验证用户权限、加载数据等。

以下是一些常见的路由守卫类型：

beforeEach: 全局前置守卫。
beforeResolve: 全局解析守卫。
afterEach: 全局后置钩子。
beforeEnter: 路由独享的守卫。
beforeRouteEnter: 组件内的守卫。
beforeRouteUpdate: 组件内的守卫。
beforeRouteLeave: 组件内的守卫。

<body>
    <div id="app">
        <p>
            <!-- 这里使用router-link标签来实现路由跳转 -->
            <router-link to="/home">首页</router-link><br>
            <router-link to="/about">关于</router-link><br>
            <router-link to="/login">登录</router-link>
        </p>
        <!-- 路由出口（这里显示路由的内容） -->
        <router-view></router-view>
    </div>

    <script src="../js/vue3.js"></script>
    <script src="../js/vue-router.js"></script>
    <script>
        const Home = {
            template: '<div>首页</div>'
        }
        const About = {
            template: '<div>关于</div>'
        }
        const Login = {
            template: '<div>登录</div>'
        }

        const routes = [
            {
                path: '/',
                redirect: '/login' 
            }, {
                path: '/home',
                component: Home
            }, {
                path: '/about',
                component: About
            }, {
                path: '/login',
                component: Login
            }
        ]

        const router = VueRouter.createRouter({
            history: VueRouter.createWebHashHistory(),
            routes: routes
        })

        // 路由守卫
        router.beforeEach((to, from, next)=>{
            // 创建守卫规则
            const nextRoute = ['/home', '/about']
            // 使用isLogin来模拟是否登录
            let isLogin = true
            // 判断topath是否需要验证，如果当前路由是登录页面，并且未登录，则跳转到登录页面
            // indexOf()是用来判断数组中是否存在某个元素的，如果存在，则返回元素的索引值，否则返回-1
            if(nextRoute.indexOf(to.path) >= 0) {
                if(!isLogin) {
                    router.path('/login')
                }
            }
            // 验证通过后继续往下执行
            next()
        })

        Vue.createApp({}).use(router).mount('#app')
    </script>
</body>

posted @ 2024-08-15 22:52 一生万物万物归一阅读(9) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue3的学习---2

· Vue3的学习---11

· Vue笔记7--路由管理Vue-router

· Vue router 路由

· vue-router 路由

阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】

公告

昵称：一生万物万物归一
园龄： 9个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

合集

Vue3的学习(12)

Vue3的学习---5