vue路由重定向和动态路由
vue路由重定向
实现页面跳转一般有两种方式:重定向页面和转发页面。
重定向页面的具体实现方式就是更改页面的URL,跳转到指定的地方。vue中实现路由重定向比较简单:
this.$router.push('/home')
this.$router.push({name:'Home'})
this.$router.push({path:'/home'})
动态路由
动态路由就是在路由中携带参数。
// 在定义路由的时候指定参数
const router1 = createRouter({
history:webHistory,
routes:[
{
/* 动态路由传参 */
path:'/book_detail/:id',
name:'book_detail',
component:bookDetail
}
]
})
点击BookDetail就可以重定向,book1是我们需要传的参数。
<!-- 动态路由传参 -->
<router-link :to="{name:'book_detail', params:{id:book1}">BookDetail</router-link>