396 vue路由配置：动态路由，详情列表案例

4.1 动态路由 => 详情列表

导入 ： 列表三个手机都要点击，进入详情页， 只需要一个组件，显示不同的数据即可

# 入口
<router-link to="/detail/1">手机1</router-link>
<router-link to="/detail/2">手机2</router-link>
<router-link to="/detail/3">手机3</router-link>

<router-link to="/detail">手机4</router-link>  没有参数如何????

# 规则
routes： [
  // 2 . 路由规则
  { path： '/detail/：id?'， component： Detail }
]

# 获取参数的三种方式
const Detail =  {
    template： `
        // 方式1 ： 组件中直接读取
        <div> 显示详情页内容....{{ $route.params.id  }} </div>
    `，
    created() {
        // 方式2 ： js直接读取
        // 打印只会打印一次，因为组件是复用的，每次进来钩子函数只会执行一次
        console.log(this.$route.params.id)
    }，
    // 方式3 ： 监听路由的参数，为什么不需要深度监听，因为一个路径变化，就会对应一个对新的路由对象(地址变)
    watch： {
        $route(to， from) {
            console.log(to.params.id)
        }
    }
}

05-动态路由-详情页.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <!-- 
       动态路由
       1. 使用参数接收不同的路由参数  
        path ='/detail/:id'  
       2. 参数可传可不传  path ='/detail/:id?' 
     -->

    <div id="app">
        <!-- 1. 入口 -->
        <router-link to="/detail/1">手机1</router-link>
        <router-link to="/detail/2">手机2</router-link>
        <router-link to="/detail/3">手机3</router-link>
        <router-link to="/detail">手机4</router-link>

        <!-- 4. 出口 -->
        <router-view></router-view>
    </div>

    <script src="./vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        // 3. 组件
        const detail = {
            template: `<div>详情页组件 {{ $route.params.id }}</div>`
        }

        //  实例化
        const router = new VueRouter({
            // 2. 规则
            routes: [{
                path: '/detail/:id?',
                component: detail
            }]
        })

        const vm = new Vue({
            router,
            el: '#app',
            data: {}
        })
    </script>
</body>

</html>

posted on 2020-03-21 15:14  冲啊！  阅读(864)  评论(1)  编辑  收藏  举报

导航