Vue的动态路由

最新推荐文章于 2024-07-04 17:04:23 发布

Gbing1228

最新推荐文章于 2024-07-04 17:04:23 发布

阅读量508

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/Gbing1228/article/details/103557064

版权

本文详细介绍了Vue的动态路由概念，包括动态路由的获取、切换、嵌套、命名、通配符匹配、编程式导航、滚动行为以及导航守卫的使用。同时，探讨了在导航完成后和完成前如何从服务器获取数据。

摘要由CSDN通过智能技术生成

我对vue中Router的解释，可以到https://blog.csdn.net/Gbing1228/article/details/103556607了解

一、什么是动态路由？

例如：点击不同的歌手进入到不同的歌手详情页

虽然每个请求的id不同，但是都会导航到同一个组件中，在配置路由的时候就不能写死。在vue-router中，动态路由由“：”开头。

 <router-link to="/user/123">User123</router-link>

 <router-link to="/user/456">User456</router-link>

 {
   path: "/user/:id",
   component: user
 }

二、在动态路由中怎么获取动态部分？

在vue-router实例注入到根实例后，用this.$router来获取router实例，他有一个params属性，来获取这个动态部分。他是一个对象，属性名就是路径中定义的动态id，属性值就是router-link中to的部分。在使用vuex时，组件要想获取state中的状态，使用computed属性，动态路由获取也是一样的用compute属性

computed: {
            dynamicSegment () {//定义一个computed属性来获取动态router
                return this.$route.params.id
            }
        }

三、动态路由的来回切换

动态路由来回切换时，由于他们指向同一个组件，vue并不会销毁原先创建好的这个组件，而是复用这个组件。第一次点击user/123时，vue就把对应的user组件渲染出来了，在user/123、user/456切换时，user组件就不会发生变化了，组件的生命周期就不管用了。这时，需要用watch来监听$router的变化

<script>
    export default {
        data () {
            return {
                dynamicSegment: ''
            }
        },
        watch: {
            $route (to,from){
                // to表示的是你要去的那个组件，from 表示的是你从哪个组件过来的，
                //它们是两个对象，你可