Vue笔记--Router路由--VueRouter--三、动态路由

三、动态路由

• 多个url指向一个组件，某一类URL都映射到同一组件
• 在设置router路由配置设置时，path路径中部分路径设置":"动态设置
• 视图组件设置，设置动态路由后，动态部分为任意内容均跳转到统一组件
• ":"部分的对应信息成为路径参数，存储在vm.$route.params中

示例

    <!-- 动态路由 -->
    <div id="app">
        <router-link to="/index/11/page/one">第一个跳转</router-link>
        <router-link to="/index/12/page/two">第二个跳转</router-link>
        <router-link to="/index/13/page/three">第一个跳转</router-link>

        <router-view></router-view>
    </div>

<script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        // 创建VueRouter实例
        const router = new VueRouter({
            routes: [{
            	//  设置动态路径部分
                path: '/index/:id/page/:num',
                component: {
                	// $route.params获取到跳转路径中的动态参数
                    template: `<div>展示内容 :  通过route.params可以获得参数{{ $route.params}}</div>`
                }
            }]
        })
        // 注入router
        new Vue({
            el: '#app',
            router
        })
    </script>