28.Vue.js :监听路由参数变化

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

<head>
    <title>路由router</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
    <!-- 1.引入路由文件 -->
    <script src="./vue-router.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <!-- vue路由中通过router-link去做跳转，它有一个to属性，to属性的值必须和
              path的路径相对应

              router-link将来会被渲染成为a标签，他的to属性会被渲染成a标签的href属性，
              但他的值前面会加一个#，变为锚点
             -->

            <li>
                <router-link to="/index">首页</router-link>
            </li>
            <li>
                <router-link to="/productType/11">水果</router-link>
            </li>

            <li>
                <router-link to="/productType/22">蔬菜</router-link>
            </li>
            <li>
                <router-link to="/productType/33">肉类</router-link>
            </li>
        </ul>
        <!-- 6.通过router-view挖坑，路径匹配到的组件都会渲染到这个坑里面来 -->
        <router-view></router-view>
    </div>
    <script>
        // 2.准备路由需要的文件
        var index = Vue.component('index', {
            template: '<div>首页</div>'
        })
        var cookBook = Vue.component('cookBook', {
            template: '<div>我这里有很多的食谱，欢迎查看</div>'
        })

        var productType = Vue.component('productType', {
            data() {
                return {
                    allProduct: ''
                }
            },
            // 在html 中获取路由参数 通过this.$route.params 参数名
            template: `
            <div>这里显示商品编号{{$route.params.id}}
            <p>{{allProduct}}<button @click='jumpTo'>查看食谱</button></p>
            <router-view></router-view>
            </div>`,
            methods: {
                jumpTo() {
                    //通过$router来跳转
                    this.$router.push({
                        name: 'cookBook'
                    })
                }
            },
            // 在js中获取路由参数通过this.$route.params.参数名
            mounted() {
                console.log(this.$route.params.id)
            },
            watch: {
                //to 表示你将要去的路由对象，from表示你从哪个路由对象来
                '$route' (to, from) {
                    if (to.params.id === '11') {
                        this.allProduct = '西瓜/香蕉/苹果'
                    } else if (to.params.id === '22') {
                        this.allProduct = '白菜/胡萝卜/香菇'
                    } else {
                        this.allProduct = '鸡肉/羊肉/鸭肉'
                    }
                }
            }
        })

        // 3.创建路由对象，在这个对象里面去配置路由规则
        var router = new VueRouter({
            // 4.通过routes属性配置路由规则，它是一个数组，数组中放的是对象，每个对象对应一条规则，并且每个对象里面都包含有name（表示路由规则的名称）/path（表示路径）/component（表示路径对应的组件）
            routes: [{
                // 路由加参数的方法：参数名
                // 嵌套路由的创建通过children属性，它是一个数组，数组中放的是对象，每个对象对应一条规则
                name: 'index',
                path: '/index',
                component: index
            }, {
                name: 'productType',
                path: '/productType/:id',
                component: productType,
                children: [
                    //嵌套中的path不能加/
                    {
                        name: 'cookBook',
                        path: 'cook_book',
                        component: cookBook
                    }
                ]
            }]
        })
        var vm = new Vue({
            el: '#app',
            // 5.在vue实例中注入路由，这样整个应用程序都会有路由了
            router,
            data: {

            }
        })
    </script>
</body>

</html>
28.Vue.js :监听路由参数变化

猜你喜欢
