别名、重定向和命名路由
原创...小于 1 分钟
别名
有时候,用户访问/
和/home
都应该跳转到home页面,此时可用路由别名来实现
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
alias: 'home',
component: () => import('../views/home/home.vue')
},
{
path: '/about',
name: 'about',
component: () => import('../views/about/about.vue'),
}
]
})
export default router
重定向
有时用户想访问about页面时直接看到about1页面的内容
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: () => import('../views/home/home.vue')
},
{
path: '/about',
name: 'about',
redirect: '/about/about1',
component: () => import('../views/about/about.vue'),
children: [
{
path: 'about1',
name: 'about1',
component: () => import('../views/about/about1.vue'),
},
{
path: 'about2',
name: 'about2',
component: () => import('../views/about/about2.vue'),
}
]
}
]
})
export default router
命名路由
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
alias: 'home',
component: () => import('../views/home/home.vue')
},
{
path: '/about',
name: 'about',
component: () => import('../views/about/about.vue'),
}
]
})
export default router
之后就可以通过路由名字进行跳转了
router.push({
name:"about"
})
<router-link :to="{ name:'about'}">跳转到about</router-link>
Powered by Waline v2.15.7