Vue Router 路由

配置

配置 Route

import路径为相对于当前文件的路径。

const routes = [
    {
        path: "/path",
        component: () => import("path-to-page.vue")
    },
    // ...
]

使用 @ 指定根目录

要在import路径中使用@符号来代表指定的根目录，需要进行配置。

在 vite.config.js 中，添加resolve属性。

export default defineConfig({
    plugins: [vue()],
    // 添加 resolve 属性
    resolve: {
        //配置路径别名
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    }
})

在 jsconfig.json 中添加路径，使得VSCode能够进行提示。

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"] // 配置 @ 符号指向 src 目录
        }
    }
}

现在在import路径中使用 @ 符号就代表了 /src/。

const routes = [
    {
        path: "/path",
        component: () => import("@/views/page.vue")
    },
    // ...
]

路径别名

添加alias属性，值为字符串或者字符串数组。

{
    path: "/",
    alias: ["/home", "/haha"],
    component: () => ...
}

命名路由

可以为路由指定名称，引用该路由时可以直接使用名称。
添加name属性。

{
    path: "/users/:id",
    name: "user_page",
    component: () => ...
}

创建 Router

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

URL模式（history）

Hash 模式：createWebHashHistory()。在URL文件路径前面会加上/#/，例如www.example.com/#/path。这个模式不需要服务器配置就可以正常工作，因为#后的所有内容都没有被当作实际路径，而是传入脚本内部处理。
HTML5 模式：createWebHistory()。需要进行服务器配置，将对所有不是对于静态资源的访问都转向index.html。
内存模式：createMemoryHistory()。访问的路径储存于内存中，不会有历史记录，无法使用浏览器的后退和前进按钮。需要手动进行首次路径导航。

推荐使用HTML5模式。

载入 Router

在 main.js 中，use Router。

createApp(App)
    .use(router) // 载入 Router
    .mount('#app')

配置主页面

在 App.vue 的模板中添加 router-view 组件作为页面容器。

<template>
    <router-view />
</template>

获取参数

?query参数

www.example.com/page?name=abc

使用$route.query.name获取。

$route.query.name

URL参数

www.example.com/users/1

在Route配置路径中添加:id。

{
    path: "/users/:id",
    component: ...
},

使用$route.params.id获取。

可选参数（非必需）

在参数后添加问号。

{
    path: "/users/:id/:name?",
    component: ...
},

route-link 链接标签

与<a>标签作用类似。

<route-link to="/path?name=aaa">跳转</route-link>

但是可以参数化跳转。

<!-- ?query 参数 -->
<route-link :to="{
    path: '/path',
    query: {
        name: 'aaa'
    }
}">跳转</route-link>

<!-- URL 参数 -->
<route-link :to="{
    path: '/users/:id',
    params: {
        id: 123
    }
}">跳转</route-link>

也可以使用路由名称来引用路由。

<!-- URL 参数 -->
<route-link :to="{
    name: 'user_page',
    params: {
        id: 123
    }
}">跳转</route-link>

使用代码进行导航

需要从vue-router导入useRouter函数，获取Router对象。

import {useRouter} from "vue-router";

const router = useRouter();

使用router.push(to)来导航，to参数与<router-link>中的to属性相同。

router.push("/path?name=aaa");

router.push({
    path: "/path",
    query: {
        name: "aaa"
    }
});

router.push({
    path: "/user/:id",
    params: {
        id: 123
    }
});

router.push({
    name: "user_page",
    params: {
        id: 123
    }
});

子路由

路由可以嵌套。Route配置中添加children属性，类型为Route[]。

{
    path: "/users",
    component: () => import("@/views/users/root.vue"),
    children: [
        {
            path: "login",
            component: import("@/views/users/login.vue")
        },
        ...
    ]
}

父路由的页面中需要添加<router-view>，为子路由的组件提供容器，才能显示子路由的页面。

可以在父路由的页面中添加头部、导航栏等组件，实现页面框架。

路由重定向

在路由配置中添加redirect属性，值为导航to参数，可以为字符串链接或复杂字典对象。重定向会改变URL。

{
    path: "/account/login",
    redirect: "/user/login"
}

中间件

可以为路由添加前置中间件，类似express的middleware。

router.beforeEach((to, from, next) => {
    next(); // 继续
    
    next(false); // 拦截
});

还有前置解析中间件、后置钩子等中间件。