vue路由重定向和动态路由

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>