笔记大全

Vue路由官方文档学习笔记

更新时间：2023-07-08

前言

Vue.js是一款流行的JavaScript框架，主要用于构建交互式前端单页应用程序（SPA）。在Vue.js中，Vue Router是一款官方的路由管理插件，用于管理用户的路由和视图之间的映射。本文将作为Vue Router官方文档的学习笔记，提供详细的路由配置和相关代码示例。

基本路由

Vue Router的基本路由配置非常简单。使用Vue Router，你需要先安装它，并创建一个Vue的实例来管理它。下面是一个基本的Vue Router配置示例：

            // 引入Vue和Vue Router
            import Vue from 'vue'
            import VueRouter from 'vue-router'
            
            // 使用Vue Router
            Vue.use(VueRouter)
            
            // 定义路由
            const routes=[
                { path: '/home', component: Home },
                { path: '/about', component: About }
            ]
            
            // 创建Vue Router实例
            const router=new VueRouter({
                routes
            })
            
            // 创建Vue实例，并将router注入
            const app=new Vue({
                router
            }).$mount('#app')

在上面的代码中，我们首先需要引入Vue和Vue Router模块，并使用Vue.use()方法安装Vue Router。然后，我们定义了一个路由数组，其中每个路径都对应一个组件。最后，我们使用VueRouter()生成一个Vue Router的实例，并将其注入到Vue应用程序实例中。

动态路由

动态路由允许我们通过传递动态参数来生成路由。这些参数被称为路由参数，可以通过$route对象访问。下面是一个动态路由示例：

            // 定义路由
            const routes=[
                { path: '/user/:id', component: User }
            ]
            
            // 创建Vue Router实例
            const router=new VueRouter({
                routes
            })
            
            // 在User组件内访问$route对象
            // 在mounted钩子内输出id参数
            export default {
                mounted () {
                    console.log(this.$route.params.id)
                }
            }

在上面的例子中，我们可以通过访问$this.$route.params.id来访问路由参数。在Vue Router中，我们可以使用“:”符号来定义动态路径参数，即“/user/:id”。这意味着当用户访问“/user/1”路径时，路由会将1解析为路由参数id，并将其传递到User组件。

嵌套路由

嵌套路由是指将一个路由作为另一个路由的子路径。这可以很好地管理复杂的视图层次结构，例如在应用程序的侧边栏中创建多级菜单。下面是一个嵌套路由示例：

            // 定义父级路由
            const routes=[
                { path: '/dashboard', component: Dashboard ,
                    children: [
                        // 定义子路由
                        { path: 'overview', component: Overview },
                        { path: 'stats', component: Stats }
                    ]
                }
            ]
            
            // 创建Vue Router实例
            const router=new VueRouter({
                routes
            })

在上面的代码中，我们首先定义了一个父级路由“/dashboard”，其中包含两个子路由“/dashboard/overview”和“/dashboard/stats”。子路由的定义使用了“children”属性，并放置在父级路由配置的内部。这样，当用户访问“/dashboard/overview”路径时，Vue Router会渲染Dashboard组件和Overview组件。

总结

本文作为Vue Router官方文档的学习笔记，提供了详细的路由配置和相关代码示例。Vue Router是一个流行的官方路由管理插件，用于管理用户的路由和视图之间的映射。在本文中，我们介绍了基本路由、动态路由和嵌套路由，这些功能可以让我们轻松地构建复杂的视图层次结构。

c语言编程笔录