05.动态路由与静态路由匹配

最新推荐文章于 2023-12-24 10:11:28 发布

前端星人

最新推荐文章于 2023-12-24 10:11:28 发布

阅读量514

点赞数

分类专栏： vue专栏文章标签： vue

本文链接：https://blog.csdn.net/wl516372370/article/details/106448122

版权

本文详细介绍了Vue中动态路由的匹配，包括页面渲染、模板创建、路由实例化和注册，以及路由组件如何通过props传递参数，分别讨论了布尔型、对象型和函数型的props用法。此外，还讲解了命名路由的使用，阐述了页面传参的方法和注意事项。

摘要由CSDN通过智能技术生成

通过动态路由参数的模式进行路由匹配

一、路由的简单动态匹配
二、路由组件传递参数（*重点）
三、命名路由

一、路由的简单动态匹配

1.路由的页面渲染

<div id="app">
    <router-link to="/login/1">login1</router-link>
    <router-link to="/login/2">login2</router-link>
    <router-link to="/login/3">login3</router-link>
    <router-link to="/register">register</router-link>
    <!--    路由占位符-->
    <router-view></router-view>
</div>

*当我们有很多个用户id时，就必须使用动态路由来进行匹配。

2.创建路由的模板

   const login = {
   
        template: '<h1>登录组件---当前的id值为{
   { $route.params.id }}</h1>'
    };
    const register = {
   
        template:'<h1>注册组件</h1>'
 };

3.创建路由实例

    let router = new VueRouter({
   
        routes: [
            {
   path: '/', redirect: '/login/:id'},//路由的重定向
            {
   path: '/login/:id'