vueRouter-动态路由匹配原

我们经常需要把某种模式匹配到的所有路由，全都映射到同一个组件，例如，我们有一个User组件，对于所有ID各不相同的用户，都要使用这个组件来渲染，那么我们可以在vue-router的路由路径中使用动态路径参数（dynamic segment）来达到这个效果

<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <p>
            <router-link to="/user/foo11">foo</router-link>
            <router-link to="/user/bar11">bar</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script>
    const User = {
        template: `<div>{{$route.params.id}}</div>`
    }
    const router = new VueRouter({
        routes: [
            { path: "/user/:id", component: User }
        ]
    })
    const app = new Vue({ router }).$mount("#app")
    //id 代表user下一级别的文字
    //{{$route.params.id}}显示foo11 或者 bar11，即点击foo时显示foo11，点击bar显示bar11
    </script>
</body>

现在呢，像 /user/foo11 和 /user/bar11 都将映射到相同的路由。

你可以在一个路由中设置多段路径参数，对应的值都会设置到$route.params中，例如模式 /user/:username 匹配路径 /user/evan $route.params {username:"evan"} 模式/user/:username/post/:post_id 匹配路径 /user/evan/post/123 $route.params {username:"evan",post_id:123} 除了$route.params外，$route对象还提供了其它有用的信息，例如，$route.query(如果URL中有查询参数)、$route.hash等等响应路由参数的变化，提醒一下，当使用路由参数时，例如从/user/foo导航到user/bar,原来的组件实例会被复用，因为2个路由都渲染同一个组件，比起销毁再创建，复用则显得更加高效，不过，这也意味着组件的生命周期钩子不会再被调用，复用组件时，想对路由参数的变化做出响应的话，你可以简单的watch（监测变化）$route对象

<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <p>
            <router-link to="/user/foo11">foo</router-link>
            <router-link to="/user/bar11">bar</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script>
    const User = {
        template: `<div>{{$route.params.id}}</div>`,
        watch:{
            "$route" (){
                alert(this.$route.params.id)
            }
        }
    }
    const router = new VueRouter({
        routes: [
            { path: "/user/:id", component: User }
        ]
    })
    const app = new Vue({ router }).$mount("#app")
    </script>
</body>



<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <p>
            <router-link to="/user/foo11">foo</router-link>
            <router-link to="/user/bar11">bar</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script>
    const User = {
        template: `<div>{{$route.params.id}}</div>`,
        watch: {
            "$route": "doSomething"
        },
        methods: {
            doSomething: function() {
                alert(this.$route.params.id)
            }
        }
    }
    const router = new VueRouter({
        routes: [
            { path: "/user/:id", component: User }
        ]
    })
    const app = new Vue({ router }).$mount("#app")
    </script>
</body>

(adsbygoogle = window.adsbygoogle || []).push({});

vueRouter-动态路由匹配 原

vueRouter-动态路由匹配原