vue学习十三(VueRouter起步、动态路由参数匹配、获取、监测变化(测试无效))

本文链接：https://blog.csdn.net/u013210620/article/details/82907731

文章目录

起步

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。

路由中有三个基本的概念 route, routes, router。

1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容，这是一条route, about按钮 => about 内容，这是另一条路由。

2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]

3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

路由的步骤：

定义 (路由) 组件。
定义路由
创建 router 实例，然后传 routes 配置
创建和挂载根实例。

<body>
    <div id="box">
        <router-link to="/one">One</router-link>
        <router-link to="/two">Two</router-link>
        <router-view></router-view>
    </div>

    <script>
        //1、定义 (路由) 模版组件
        const Foo = { template: '<div>第一个router</div>' }
        const Bar = { template: '<div>第二个router</div>' }

        //2、定义路由
        var routes = [
            {
                path: "/one",
                component: Foo
            },
            {
                path: "/two",
                component: Bar
            },
        ];
        // 3、创建 router 实例
        var router = new VueRouter({
            routes
        });
        // 4、创建和挂载根实例
        const app = new Vue({
            router
        }).$mount('#box')

    </script>

效果如下：
在这里插入图片描述

当然我们也可以将路由模板，放在html块，如下

<body>
    <div id="box">
        <router-link to="/one">One</router-link>
        <router-link to="/two">Two</router-link>
        <router-view></router-view>
    </div>

    <!--定义模版-->
    <template id="Foo">
        <div>
            第一个router
        </div>
    </template>
    <template id="Bar">
        <div>
            第二个router
        </div>
    </template>

    <script>
        //1、定义 (路由) 模版组件
    
        //2、定义路由
        var routes = [
            {
                path: "/one",
                component: { template: "#Foo" }
            },
            {
                path: "/two",
                component: { template: "#Bar" }
            },
        ];
        // 3、创建 router 实例
        var router = new VueRouter({
            routes
        });
        // 4、创建和挂载根实例
        const app = new Vue({
            router
        }).$mount('#box')

    </script>
</body>

动态路由参数匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果
上面的例子我们，可以修改如下地方代码，其他的无需修改：

 <div id="box">
        <router-link to="/one/1">One</router-link>
        <router-link to="/two/2">Two</router-link>
        <router-view></router-view>
    </div>

 var routes = [
            {
                path: "/one/:id",
                component: { template: "#Foo" }
            },
            {
                path: "/two/:id",
                component: { template: "#Bar" }
            },
        ];

测试效果如下：
file:///Users/zhiliao/zhiliao/vue/index_test.html#/one/1

One Two
第一个router

file:///Users/zhiliao/zhiliao/vue/index_test.html#/two/2

One Two
第二个router

动态路由参数获取

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID

我们在原来的例子基础上修改如下部分，其他的无需变动

<template id="Foo">
        <div>
            第一个router
            {{$route.params.id}}
        </div>
    </template>
    <template id="Bar">
        <div>
            第二个router
            {{$route.params.id}}
        </div>
    </template>

测试效果如下：
file:///Users/zhiliao/zhiliao/vue/index_test.html#/two/2

One Two
第二个router 2

file:///Users/zhiliao/zhiliao/vue/index_test.html#/one/1

One Two
第一个router 1

响应路由参数的变化(测试失败)

提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

或者

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

不过我测试是失败的，没有得到响应，以下是我的代码：

<body>
    <div id="box">
        <router-link to="/one">One</router-link>
        <router-link to="/two">Two</router-link>
        <router-view></router-view>
    </div>

    <script>
        //1、定义 (路由) 模版组件
        const Foo = {
            template: '<div>第一个router</div>',
            watch: {
                $route (to, from) {
                    // 对路由变化作出响应...
                    console.info("sfsfs")
                }
            }

        }
        const Bar = {
            template: '<div>第二个router</div>',
            watch: {
                $route (to, from) {
                    // 对路由变化作出响应...
                    console.info("werwer")

                }
            }
        }

        //2、定义路由
        var routes = [
            {
                path: "/one",
                component: Foo
            },
            {
                path: "/two",
                component: Bar
            },
        ];
        // 3、创建 router 实例
        var router = new VueRouter({
            routes
        });
        // 4、创建和挂载根实例
        const app = new Vue({
            router
        }).$mount('#box')

    </script>



</body>