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: `
展示内容 :  通过route.params可以获得参数{
      { $route.params}}
`
                }
            }]
        })
        // 注入router
        new Vue({
     
            el: '#app',
            router
        })
    </script>