vue3路由配置与路由跳转

news2024/11/19 3:28:51

Vue Router 是Vue.js的官方路由器。它与 Vue.js 核心深度集成，使使用 Vue.js
构建单页应用程序变得轻而易举。特点包括：

嵌套路由映射动态路由模块化、
基于组件的路由器配置路由参数、查询、通配符查看由 Vue.js 的过渡系统提供支持的过渡效果
细粒度的导航控制
CSS 类的链接
HTML5 历史模式或哈希模式
可定制的滚动行为
-URL 的正确编码

使用 Vue + Vue Router 创建单页应用程序很使用 Vue.js，我们已经在使用组件组合应用程序。在将 Vue Router 添加到组合中的时候，我们需要做的就是将我们的组件映射到路由感觉：并让 Vue Router 知道它们在哪里渲染。

请注意，我们如何使用自定义组件来创建链接，而不是经常使用的a标签。router-link这允许 Vue Router 在不重新加载页面的情况下更改 URL

1.安装

npm
npm install vue-router@4

yarn
yarn add vue-router@4

2.src路径下创建文件

在这里插入图片描述

3.在路由文件引入相关路由方法

import {createRouter, createWebHashHistory} from "vue-router";

4.创建路由映射数组

const routes = [
{
path: '/',
redirect: '/Home'
}, 
{
path: "/",
name: "Home",
component: Home,
}
];

拥有子路由情况

{
        path: "/",
        name: "Home",
        component: Home,
        children: [
            {
                path: "/dashboard",
                name: "dashboard",
                meta: {
                    title: '系统首页'
                },
                component: () => import ( /* webpackChunkName: "dashboard" */ "../views/admin/Dashboard.vue")
            }, {
                path: "/table",
                name: "basetable",
                meta: {
                    title: '表格'
                },
                component: () => import ( /* webpackChunkName: "table" */ "../views/admin/BaseTable.vue")
            }, {
                path: "/admin-list",
                name: "admin-list",
                meta: {
                    title: '管理员列表'
                },
                component: () => import ( /* webpackChunkName: "table" */ "../views/admin/competence/adminList.vue")
            },{
                path: "/node-list",
                name: "node-list",
                meta: {
                    title: '节点列表'
                },
                component: () => import ( /* webpackChunkName: "table" */ "../views/admin/competence/nodeList.vue")
            }
        ]
    }

5.配置路由对象并导出

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

export default router;

6.配置完成之后在main.js文件中引入

import router from './router'

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

声明式导航

index.vue

<template>
    <router-link to="/home">首页</router-link>
    <!--  显示-->
    <router-view />
</template>

编程式导航

除了使用为声明式导航创建标记方式外，我们还可以使用路由器的实例方法以编程完成此操作。
编程式导航新的vue-router里面尤大加入了一些方法，具体使用如下：

引入路由函数

import { useRouter } from "vue-router";

使用

setup() {
    //初始化路由
    const router = useRouter();
    router.push({
        path: "/"
    });
    
    return {};
}

前置守卫顾名思义，Vue路由器提供的每个卫士主要用于通过审核或取消来保护导航。有多种连接到导航过程的方法：多种方式、路线或组件内。

router.beforeEach((to, from) => {
    // ...
    // explicitly return false to cancel the navigation
    return false
})
to：导航到的标准化格式的目标路线位置。
from：以标准化格式导航的当前路线位置。