Vue-router路由

vue3项目如何配置路由

                     1.下载vue-router，在路由文件中引入相关依赖

                     2.创建路由信息对象数组

                     3.创建路由管理器对象并对外抛出

                     4.在main.js使用use(router)方法，将路由管理对象与当前vue项目相关联

                     5.在项目中设置路由导航router-link与路由出口router-view

                     常见面试题：route、routes、router的区别

                            route：一组路由信息对象

                                   {path: '/foo', component: Foo}

                            routes：路由信息对象数组

                                    const routes: [

        {path: '/', redirect: '/bar'},

        {path: '/bar', component: Bar},

        {path: '/foo', component: Foo},

        {path: '/user', component: User}

]

                            router：路由管理器对象

                                   const router = createRouter({      })

              动态路由

                     定义：我们经常需要把某种模式匹配到所有路由，全都映射到同个组件

例如，我们有一个user组件，对于所有ID各不相同的用户，都要用这个组件来渲染

                            一个[路径参数]使用冒号：标记；

                            可以在一个路由中设置多端[路径参数]

                     动态路由的传参

                            1.params传参

                                   定义动态路由

                                   传输参数

                                   接收参数

                            props传参

                                   值为布尔值的形式

                                          定义动态路由

                                          传输参数

                                          接收参数

                                   值为函数的形式

                     动态路由切换时的特点

                           

-动态路由当路由发生切换时，并不会重新渲染路由组件，而会使用

已经渲染过的路由组件（知识会修改路由参数值），这样增加了程

序的高效及时性

-另一方面，组建的生命周期钩子回调函数不会再次调用

                            如何解决

       Vue-router路由

              vue3项目红如何配置路由

                     1.下载vue-router，在路由文件中引入相关依赖

                     2.创建路由信息对象数组

                     3.创建路由管理器对象并对外抛出

                     4.在main.js使用use(router)方法，将路由管理对象与当前vue项目相关联

                     5.在项目中设置路由导航router-link与路由出口router-view

                     常见面试题：route、routes、router的区别

                            route：一组路由信息对象

                                   {path: '/foo', component: Foo}

                            routes：路由信息对象数组

                                    const routes: [

        {path: '/', redirect: '/bar'},

        {path: '/bar', component: Bar},

        {path: '/foo', component: Foo},

        {path: '/user', component: User}

]

                            router：路由管理器对象

                                   const router = createRouter({      })

              动态路由

                     定义：我们经常需要把某种模式匹配到所有路由，全都映射到同个组件

例如，我们有一个user组件，对于所有ID各不相同的用户，都要用这个组件来渲染

                            一个[路径参数]使用冒号：标记；

                            可以在一个路由中设置多端[路径参数]

                     动态路由的传参

                            1.params传参

                                   定义动态路由

                                   传输参数

                                   接收参数

                            props传参

                                   值为布尔值的形式

                                          定义动态路由

                                          传输参数

                                          接收参数

                                   值为函数的形式

                     动态路由切换时的特点

                           

-动态路由当路由发生切换时，并不会重新渲染路由组件，而会使用

已经渲染过的路由组件（知识会修改路由参数值），这样增加了程

序的高效及时性

-另一方面，组建的生命周期钩子回调函数不会再次调用