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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM