Vue Router 路由
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); // 拦截
});
还有前置解析中间件、后置钩子等中间件。
评论已关闭