第三十四节:Vue路由:Vue-router动态路由

前沿:

上面我们定义的路由，都是严格匹配的:

只有router-link 中的to属性和 js 中一条路由route中 path 一模一样，

才能显示相应的组件component. 但有时现实却不是这样的，

例如: 如下的需求:

当我们访问网站并登录成功后，它会显示 " 欢迎你，+ 你的名字" 。

不同的用户登录，只是显示“你的名字” 部分不同，其它部分是一样的。

这就表示，它是一个组件，假设是user组件。不同的用户（就是用户的id不同），它都会导航到同一个user 组件中。这样我们在配置路由的时候，就不能写死, 就是路由中的path属性，

那我们接下来就看看动态路由应该如何设置:

1. 动态路由的配置

1.1 回顾node中的动态路由

其实在之前的node课程中,就提到多动态路由的配置,

例如:
我希望用来在访问/students/100001和/students/100002的时候

都能匹配到同一个路由,走同一个路由处理函数, 咱们就得定义/students/:sid的路由

此时:sid就是动态的部分,这条路由就是动态路由,同时可以利用req.params.sid来获取路由的不同部分的数据

1.2 vue-router中动态路由

vue-router中动态路由的定义和node差别不太,唯一的差别就在动态路由参数的获取,先看动态路由的定义:

组件信息

<!-- 首页组件 -->
<template>
    <div id="home">
        <h2>首页</h2>
        <p>首页页面</p>
    </div>
</template>

<!-- 用户组件 -->
<template>
    <div id="user">
        <h2>用户</h2>
        <p>用户页面</p>
    </div>
</template>

配置动态路由

// router.js文件
// 配置路由映射关系
const routes = [
    {
        path:'/',
        redirect: "/home"
    },
    {
        path:'/home',
        component: Home
    },
    {
        path:'/user/:uname',
        component: User
    },
];

路由使用

<!-- app.vue 文件 -->
<div id="app">
    <router-link to="/home">首页</router-link>

    <!--  增加两个到user组件的导航，使用不同的to属性 -->
    <router-link to="/user/zhangsan">用户张三</router-link>

    <router-link to="/user/lisi">用户李四</router-link>
    
    
    <router-view></router-view>
</div>

通过示例的展示结果, 当你点击用户张三或者用户李四都能进入到User组件中

路由/user/:uname就是一个动态的路由,

在:uname部分为任何值都可以匹配到这个路由, 也都会展示User组件

那么问题来了, 在动态路由中，怎么获取到动态部分？

如果不能获取动态的值,如果在页面中展示欢迎谁呢

2. 动态路由参数的获取

2.1 动态路由参数获取的认识

其实，当整个vue-router 注入到根实例后，在组件的内部，可以通过this.$route 来获取到 router 实例。

它有一个params 属性，就是来获得这个动态部分的。

我们可以在计算属性中打印组件实例,看看组件实例上关于$route的值是什么

User组件中:

export default {
    name:"user",
    computed:{
        username(){
            console.log(this)  // 组件实例
            return 123
        }
    }
}

打印结果:

$route值_图1.png

通过打印结果就知道

组件实例对象上有一个$route属性,这个属性的值是一个对象
$route对象中path属性就是最终匹配成功的路径
$route对象中params属性就是动态路由数据, 是以键值对的形式获取

2.2 获取动态路由参数

修改用户组件,展示欢迎信息

<template>
    <div id="user">
        <h2>用户</h2>
        <p>用户页面</p>
        <p>欢迎你: {{ username }}</p>
    </div>
</template>

<script>
    export default {
        name:"user",
        computed:{
            username(){
                return this.$route.params.uname
            }
        }
    }
</script>

此时当你切换内容的时候,就会显示不同的信息

也可以直接将内容渲染到页面

代码如下

<template>
    <div id="user">
        <h2>用户</h2>
        <p>用户页面</p>
        <!-- 在模板中使用数据不用加this -->
        <p>欢迎你: {{ $route.params.uname }}</p>
    </div>
</template>

<script>
    export default {
        name:"user",
    }
</script>

3. $route监听

这里还有一个问题，就是动态路由在来回切换时，由于它们都是指向同一组件，vue不会销毁再创建这个组件.而是复用这个组件，

因此,当第一次点击 用户张三 的时候，vue 把对应的组件渲染出来，但在用户张三, 用户李四点击来回切换的时候，这个组件就不会发生变化了。

这时如果想要在组件来回切换的时候做点事情，那么只能在组件内部（user.vue中）利用watch 来监听$route 的变化。把上面的代码用监听$route 实现

<script>
    export default {
        data () {
            return {
                dynamicSegment: ''
            }
        },
        watch: {
            $route (to,from){
                // to,from表示User组件内$route的改变
                console.log(to);
                console.log(from);
                this.dynamicSegment = to.params.id
            }
        }
    }
</script>

4. 关于router-link中的to属性

说明:

在当前示例中,我们使用了,两个路由导航,真实的案例中可能就只有一个导航
根据登录的用户不同,router-link中的to属性指定的路由为不同的路由
那么我们就需要让router-link中to属性成为动态改变

修改示例:

<template>
    <div id="app">
        <router-link to="/home">首页</router-link>

        <!-- 动态to属性 -->
        <router-link :to="'/user/' + uname">用户</router-link>

        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'App',
        data(){
            return {
                uname:"张三",    
            }
        }
    }
</script>

示例说明:

to属性使用了v-bind动态绑定,因此to属性值不在是字符串,而是表达式
因此在表达式中把'/user/'字符串和uname变量组合为不同的路由
uname变量根据data中的数据发生改变, 不用的用户登录,uname就为不同的数据,可以从表单中获取.

这样我们就可以通过数据动态改变路由, 一个导航实现了动态路由处理.