vue-router（路由）详细教程

一、Vue Router 回顾

1、路由简介

路由是一个比较广义和抽象的概念，路由的本质就是对应关系。

在开发中，路由分为：

• ​ 后端路由
• ​ 前端路由

  后端路由

  • 概念：根据不同的用户 URL 请求，返回不同的内容
  • 本质：URL 请求地址与服务器资源之间的对应关系

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RFfXWjYv-1682154131731)(images/后端路由.png)]

    SPA（Single Page Application）

    • Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）
    • SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内 容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作
    • SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历 史的变化、但是hash的变化不会触发新的URL请求
    • 在实现SPA过程中，最核心的技术点就是前端路由

      前端路由

      • 概念：根据不同的用户事件，显示不同的页面内容
      • 本质：用户事件与事件处理函数之间的对应关系

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zlm0nsVA-1682154131732)(images/前端路由.png)]

        2、实现简易前端路由

        基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ENKZEDjO-1682154131733)(images/基本案例.png)]

        案例代码实现如下：

        
        
          
            
            
            
            
            
            
          
          
            
            
        
              
              主页 
              科技 
              财经
              娱乐
              
              
              
            
            
          
        
        

        3、vue-router的基本使用

        Vue Router（官网：https://router.vuejs.org/zh/）是 Vue.js 官方的路由管理器。 它和 Vue.js 的核心深度集成，可以非常方便的用于SPA应用程序的开发。

        基本使用的步骤：

        1. 引入相关的库文件
        2. 添加路由链接
        3. 添加路由填充位
        4. 定义路由组件
        5. 配置路由规则并创建路由实例
        6. 把路由挂载到 Vue 根实例中

        下面看一下具体的实施过程

        1. 引入相关的库文件
        2. 添加路由链接

        
        
         
        User 
        Register
        

        3. 添加路由填充位
        4. 定义路由组件

         var User = { 
             template: 'User' 
          } 
          var Register = { 
             template: 'Register' 
          } 
        

        5. 配置路由规则并创建路由实例

         // 创建路由实例对象   
        var router = new VueRouter({     
            // routes 是路由规则数组     
            routes: [       
                // 每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性：   
                // path 表示当前路由规则匹配的 hash 地址     
                // component 表示当前路由规则对应要展示的组件     
               {path:'/user',component: User}, 
              {path:'/register',component: Register} 
            ] 
          }) 
        

        6. 把路由挂载到 Vue 根实例中

         new Vue({ 
             el: '#app',    
             // 为了能够让路由规则生效，必须把路由对象挂载到 vue 实例对象上      
             router 
          }); 
        

        完整代码实现如下：

        
        
          
            
            
            
            
            
            
            
          
          
            
            
        
              User
              Register
              
              
            
            
          
        
        

        4、路由重定向

        路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面；

        通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

        var router = new VueRouter({ 
            routes: [      
                // 其中，path 表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址  
                //当用户在地址栏中输入`/`,会自动的跳转到`/user`,而`/user`对应的组件为User
               {path:'/', redirect: '/user'}, 
              {path:'/user',component: User}, 
              {path:'/register',component: Register} 
            ] 
          })
        

        具体实现的代码如下：

        
        
          
            
            
            
            
            
            
            
          
          
            
            
        
              User
              Register
              
              
            
            
          
        
        

        5、嵌套路由

        嵌套路由功能分析

        点击父级路由链接显示模板内容

        模板内容中又有子级路由链接

        点击子级路由链接显示子级模板内容

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SFU8QZzZ-1682154131734)(images/嵌套路由.png)]

        下面看一下实现的步骤

        父路由组件模板

        • 父级路由链接
        • 父组件路由填充位

           
                User 
                Register 
           
           
              
                
                         
                   
              
           
          

          以上的内容，在前面的课程中已经实现。

          子级路由模板

          • 子级路由链接
          • 子级路由填充位

             const Register = { 
                template: `
                
            			
            Register 组件
                 
            			
             
                  Tab1 
                  Tab2  
                         
            		 
                
            ` 
              } 
            

            嵌套路由配置

            父级路由通过children属性配置子级路由

             const router = new VueRouter({   
                 routes: [      
                     { path: '/user', component: User },      
                     {  path: '/register', component: Register,         
                      // 通过 children 属性，为 /register 添加子路由规则        
                      children: [ 
                          { path: '/register/tab1', component: Tab1 },          
                          { path: '/register/tab2', component: Tab2 }        
                      ]       
                     }     
                 ]   
             }) 
            

            具体代码实现如下：

            
            
              
                
                
                
                
                
                
                
              
              
                
                
            
                  User
                  Register
                  
                  
                
                
              
            
            

            6、动态路由匹配

            6.1 动态匹配路由的基本用法

            思考：

             
            User1 
            User2 
            User3 
            

            // 定义如下三个对应的路由规则，是否可行？？？
            { path: '/user/1', component: User } 
            { path: '/user/2', component: User } 
            { path: '/user/3', component: User } 
            

            虽然以上规则可以匹配成功，但是这样写比较麻烦。如果有100个规则，那么写起来就会非常的麻烦。

            通过观察，可以发现整个路由规则中只有后续的数字是在变化的。所以这里可以通过动态路由参数的模式进行路由匹配。

            var router = new VueRouter({ 
              routes: [     
                  // 动态路径参数 以冒号开头     
                  { path: '/user/:id', component: User } 
              ] 
            }) 
            

            const User = {   
                // 路由组件中通过$route.params获取路由参数 
                template: 'User {{ $route.params.id }}' 
            }
            

            具体代码实现如下：

            
            
              
                
                
                
                
                
                
                
              
              
                
                
            
                  User1
                  User2
                  User3
                  Register
                  
                  
                
                
              
            
            

            6.2 路由组件传递参数

            $route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦

            第一种情况：

            props的值为布尔类型

             const router = new VueRouter({ 
                routes: [       
                    // 如果 props 被设置为 true，route.params 将会被设置为组件属性     
                    { path: '/user/:id', component: User, props: true } 
                ] 
              }) 
             
              const User = { 
                        props: ['id'], // 使用 props 接收路由参数     
                            template: '用户ID：{{ id }}'  // 使用路由参数   
              } 
            

            在定义路由规则的时候，为其添加了props属性，并将其值设置为true.那么在组件中就可以通过props:['id']的形式来获取对应的参数值。

            具体代码如下：

            
            
              
                
                
                
                
                
                
                
              
              
                
                
            
                  User1
                  User2
                  User3
                  Register
                  
                  
                
                
              
            
            

            第二种情况： props的值为对象类型

             const router = new VueRouter({ 
                routes: [       
                    // 如果 props 是一个对象，它会被按原样设置为组件属性   
                    //这里相当于给组件User,通过路由的形式传递了一个对象，而这时候id在User组件中就无法获取到了。
                    { path: '/user/:id', component: User, props: { uname: 'lisi', age: 12 }} 
                ] 
              }) 
             
              const User = { 
                props: ['uname', 'age'],   
                  template: ‘
            用户信息：{{ uname + '---' + age}}
            '  
            }
            

            具体代码实现如下：

            
            
              
                
                
                
                
                
                
                
              
              
                
                
            
                  User1
                  User2
                  User3
                  Register
                  
                  
                
                
              
            
            

            在上面的代码中，在路由规则中，通过props向用户组件中传递了一个对象，那么在User用户组件中可以接收到传递过来的对象。但是参数id无法接收到。

            如果要解决这个问题，可以使用props的值为函数类型。也就是给props传递一个函数。

            第三种情况：props的值为函数类型

            const router = new VueRouter({ 
                routes: [       
                    // 如果 props 是一个函数，则这个函数接收 route 对象为自己的形参  
                    //route就是参数对象。
                    { path: '/user/:id',  
                    component: User,  
                    props: route => ({ uname: 'zs', age: 20, id: route.params.id })} 
                ] 
              }) 
             
              const User = { 
                props: ['uname', 'age', 'id'],    
                  template: ‘
            用户信息：{{ uname + '---' + age + '---' + id}}
            '  
            }
            

            完整代码如下：

            
            
              
                
                
                
                
                
                
                
              
              
                
                
            
                  User1
                  User2
                  User3
                  Register
                  
                  
                
                
              
            
            

            7、命名路由

            为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。

             const router = new VueRouter({ 
                routes: [ 
                  { 
                    path: '/user/:id', 
                    name: 'user', 
                    component: User 
                  } 
                ] 
              })
            

            
            User 
              
            

            完整代码如下：

            
            
              
                
                
                
                
                
                
                
              
              
                
                
            
                  User1
                  User2
                    
                  User3
                  Register
                  
                  
                
                
              
            
            

            8、编程式导航

            页面导航的两种方式

            声明式导航：通过点击链接实现导航的方式，叫做声明式导航

            例如：普通网页中的 链接 或 vue 中的

            编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航

            例如：普通网页中的 location.href

            编程式导航基本用法

            常用的编程式导航 API 如下：

            this.$router.push(‘hash地址’)

            this.$router.go(n)

             const User = {      
             		template: '跳转到注册页面',       
                 	methods: { 
                 	   goRegister: function(){          
                           // 用编程的方式控制路由跳转          
                           	this.$router.push('/register'); 
                    } 
                  } 
                } 
            

            具体吗实现：

            
            
              
                
                
                
                
                
                
                
              
              
                
                
            
                  User1
                  User2
                  User3
                  Register
                  
                  
                
                
              
            
            

            router.push() 方法的参数规则

             // 字符串(路径名称)   
            router.push('/home')  
            // 对象   
            router.push({ path: '/home' })  
            // 命名的路由(传递参数)  
            router.push({ name: '/user', params: { userId: 123 }})   
            // 带查询参数，变成 /register?uname=lisi   
            router.push({ path: '/register', query: { uname: 'lisi' }}) 
            

            9、路由案例

            9.1 抽离并且渲染App根组件。

            将素材中的代码修改成如下的形式：

            在上面的代码中，我们导入了Vue与Vue-Router的文件。

            然后将核心内容定义到App这个组件中，同时创建了路由对象，并且指定了路由的规则。接下来将路由对象挂载到了Vue的实例中。

            同时在中使用router-view定义了一个占位符。当输入的地址为/,对应的App组件就会在该占位符中进行展示。

            9.2 将菜单改造为路由连接

            将模板中的菜单修改成路由连接的形式，如下所示：

              
                    
            
                      
            
                        
             用户管理
                        
             权限管理
                        
             商品管理
                        
             订单管理
                        
             系统设置
                      
                    
            

            9.3 创建菜单对应组件

            基本组件创建如下：

             const Users = {
                    template: `
            
                    
            用户管理区域
                    
                    
            `,
                  };
                  const Rights = {
                    template: `
            
                    
            权限管理区域
                  
            `,
                  };
                  const Goods = {
                    template: `
            
                    
            商品管理区域
                  
            `,
                  };
                  const Orders = {
                    template: `
            
                    
            订单管理区域
                  
            `,
                  };
                  const Settings = {
                    template: `
            
                    
            系统设置区域
                  
            `,
                  };
            

            我们知道，当单击左侧的菜单时，上面定义的组件将会在右侧进行展示。

            所以需要在右侧，添加一个router-view的占位符。

            9.4 添加子路由规则并实现路由重定向

            在上一小节中，我们已经将组件都定义好了，下面需要定义其对应的路由规则。

            怎样添加对应的路由规则呢？

            我们知道整个页面是App根组件渲染出来的，而前面定义的组件，都是在App根组件中进行渲染的,也就是作为了App组件的子组件。

            所以，为上一小节中创建的组件添加路由规则，应该是作为App的子路由来进行添加，这样对应的组件才会在App组件中进行渲染。

             // 创建路由对象
                  const router = new VueRouter({
                    routes: [
                      {
                        path: "/",
                        component: App,
                        redirect: "/users",
                        children: [
                          { path: "/users", component: Users },
                          { path: "/rights", component: Rights },
                          { path: "/goods", component: Goods },
                          { path: "/orders", component: Orders },
                          { path: "/settings", component: Settings },
                        ],
                      },
                    ],
                  });
            

            当用户在浏览器的地址栏中输入’/'的时候，会渲染App组件，同时会重定向到/users，从而将Users组件渲染出来，而Users组件是在整个App组件的右侧进行渲染展示。

            当点击左侧的菜单时，对应的组件会在右侧进行展示。

            9.5 渲染用户列表数据

            这里将用户组件的内容修改成如下形式：

             const Users = {
                    data() {
                      return {
                        userlist: [
                          { id: 1, name: "张三", age: 10 },
                          { id: 2, name: "李四", age: 20 },
                          { id: 3, name: "王五", age: 30 },
                          { id: 4, name: "赵六", age: 40 },
                        ],
                      };
                    },
                    template: `
            
                    
            用户管理区域
                    
            
                      
            
                        
            编号
            姓名
            年龄
            操作
                      
                      
            
                        
            
                          
            {{item.id}}
                          
            {{item.name}}
                          
            {{item.age}}
                          
            
                            详情
                          
                        
                      
                    
                  
            `,
                  };
            

            在Users组件中定义用户数据，并且在模板中通过循环的方式将数据渲染出来。

            9.6 跳转到详情页

            当单击"详情"链接时，跳转到对应的详情页面。这里需要用到编程式导航的内容。

            首先定义用户详情页组件

              //用户详情组件
                  const UserInfo = {
                    props: ["id"],
                    template: `
                      
            用户详情页 --- 用户Id为：{{id}}
                      后退
                    `,
                    methods: {
                      goback() {
                        // 实现后退功能
                        this.$router.go(-1);
                      },
                    },
                  };
            

            在该组件中通过props方式接收传递过来的的用户编号，并且将其打印出来。

            同时在该组件中添加一个后退的按钮，通过编程式导航的方式实现后退。

            对应的路由规则如下：

              // 创建路由对象
                  const router = new VueRouter({
                    routes: [
                      {
                        path: "/",
                        component: App,
                        redirect: "/users",
                        children: [
                          { path: "/users", component: Users },
                          { path: "/userinfo/:id", component: UserInfo, props: true },
                          { path: "/rights", component: Rights },
                          { path: "/goods", component: Goods },
                          { path: "/orders", component: Orders },
                          { path: "/settings", component: Settings },
                        ],
                      },
                    ],
                  });
            

            当输入的地址为:'/userinfo/5’的形式是会渲染UserInfo这个组件，同时将props设置为true,表示会传递对应的id值。

            UserInfo这个组件也是App组件的子组件，对应的也会在App组件的右侧进行展示。

            同时，在Users组件中，给“详情”链接添加对应的单击事件，

             const Users = {
                    data() {
                      return {
                        userlist: [
                          { id: 1, name: "张三", age: 10 },
                          { id: 2, name: "李四", age: 20 },
                          { id: 3, name: "王五", age: 30 },
                          { id: 4, name: "赵六", age: 40 },
                        ],
                      };
                    },
                    methods: {
                      goDetail(id) {
                        console.log(id);
                        this.$router.push("/userinfo/" + id);
                      },
                    },
                    template: `
            
                    
            用户管理区域
                    
            
                      
            
                        
            编号
            姓名
            年龄
            操作
                      
                      
            
                        
            
                          
            {{item.id}}
                          
            {{item.name}}
                          
            {{item.age}}
                          
            
                            详情
                          
                        
                      
                    
                  
            `,
                  };
            

            对应goDetail方法中，通过编程式导航跳转到用户详情页面。

            完整代码案例：

            10、路由守卫

            Vue-router中的路由守卫，主要是对其内容进行保护，如果没有对应的权限，则不允许访问。

            我们首先来看一下全局守卫，也就是所有的路由都会经过全局守卫来进行检测。

              //实现全局守卫
                  router.beforeEach((to, from, next) => {
                    //to:去哪个页面，from来自哪个页面，next继续执行.
                    //判断哪个路由需要进行守卫，这里可以通过元数据方式
                    if (to.meta.auth) {
                      if (window.isLogin) {
                        next();
                      } else {
                        next("/login?redirect=" + to.fullPath);
                      }
                    } else {
                      next();
                    }
                  });
            

            在上面的代码中，创建了路由守卫，但是需要判断的是需要对哪个路由进行守卫，这里就是通过元数据来进行判断的。如果所跳转到的路由有元数据，并且对应的auth属性为true表明是需要进行守卫的，那么下面就需要校验用户是否登录,这里是通过判断否window.isLogin的值是否为true来进行判断的（这里简化了操作,实际应用中应该存储到sessionStorage），如果条件成立则表明用户登录，就继续访问用户希望访问到的页面，否则跳转到登录页面，而且将用户希望访问的页面地址也传递到了登录页面，这样用户登录成功后，可以直接跳转到要访问的页面。

            如果没有元数据，则继续访问用户要访问的页面。

             // 创建路由对象
                  const router = new VueRouter({
                    routes: [
                      { path: "/login", component: Login },
                      {
                        path: "/",
                        component: App,
                        redirect: "/users",
                        children: [
                          {
                            path: "/users",
                            component: Users,
                            meta: {
                              auth: true,
                            },
                          },
                          { path: "/userinfo/:id", component: UserInfo, props: true },
                          { path: "/rights", component: Rights },
                          { path: "/goods", component: Goods },
                          { path: "/orders", component: Orders },
                          { path: "/settings", component: Settings },
                        ],
                      },
                    ],
                  });
            

            在上面的代码中，给/users路由添加了元数据。

            登录组件创建如下：

              const Login = {
                    data() {
                      return {
                        isLogin: window.isLogin,
                      };
                    },
                    template: `
            
                      登录
                      注销
                      
            `,
                    methods: {
                      login() {
                        window.isLogin = true;
                        this.$router.push(this.$route.query.redirect);
                      },
                      logout() {
                        this.isLogin = window.isLogin = false;
                      },
                    },
                  };
            

            当单击登录按钮后，进行将window.isLogin设置为true, 并且进行跳转。

            全部代码如下：

            以上是全局守卫，对所有的路由都起作用。

            但是，如果项目比较简单，路由规则定义的比较少，可以将守卫定位到某个路由规则内。这就是路由独享守卫

              // 创建路由对象
                  const router = new VueRouter({
                    routes: [
                      { path: "/login", component: Login },
                      {
                        path: "/",
                        component: App,
                        redirect: "/users",
                        children: [
                          {
                            path: "/users",
                            component: Users,
                            meta: {
                              auth: true,
                            },
                            beforeEnter(to, from, next) {
                              if (window.isLogin) {
                                next();
                              } else {
                                next("/login?redirect=" + to.fullPath);
                              }
                            },
                          },
                          { path: "/userinfo/:id", component: UserInfo, props: true },
                          { path: "/rights", component: Rights },
                          { path: "/goods", component: Goods },
                          { path: "/orders", component: Orders },
                          { path: "/settings", component: Settings },
                        ],
                      },
                    ],
                  });
            

            在上面的代码中，给/users这个路由守卫，注意这里的方法名为beforeEnter.同时，这里将守卫定义在/users路由规则内，所以不需要对元数据进行判断，只需要判断用户是否登录就可以了。（注意：在进行以上测试时，需要将全局守卫的代码注释掉）

            组件内守卫

            可以在路由组件内直接定义以下路由导航守卫。

            beforeRouteEnter
            beforeRouteUpdate
            beforeRouteLeave
            

            将如下的代码直接添加到组件内。

             const Users = {
                    data() {
                      return {
                        userlist: [
                          { id: 1, name: "张三", age: 10 },
                          { id: 2, name: "李四", age: 20 },
                          { id: 3, name: "王五", age: 30 },
                          { id: 4, name: "赵六", age: 40 },
                        ],
                      };
                    },
                    methods: {
                      goDetail(id) {
                        console.log(id);
                        this.$router.push("/userinfo/" + id);
                      },
                    },
                    template: `
                      
            用户管理区域
                      
                        
                          编号姓名年龄操作
                        
                        
                          
                            {{item.id}}
                            {{item.name}}
                            {{item.age}}
                            
                              详情
                            
                          
                        
                      
                    `,
                    beforeRouteEnter(to, from, next) {
                      if (window.isLogin) {
                        next();
                      } else {
                        next("/login?redirect=" + to.fullPath);
                      }
                    },
                  };
            

            在上面的代码中，直接将路由守卫对应的方法添加到了组件中。

            注意：在测试之前将路由规则中定义的路由守卫的代码注释掉。

            11、addRoutes动态路由添加

            在前面的案例中，我们都是将路由定义好，然后通过路由守卫来判断，某个用户是否登录，从而决定能否访问某个路由规则对应的组件内容。

            但是，如果某些路由规则只能用户登录以后才能够访问，那么我们也可以不用提前定义好，而是在登录后，通过addRoutes方法为其动态的添加。

            首先这里需要，还需要全局的路由守卫来进行校验判断，只不过这里全局路由守卫的逻辑发生了变化。

            router.beforeEach((to, from, next) => {
                    //to:去哪个页面，from来自哪个页面，next继续执行.
                    if (window.isLogin) {
                      //用户已经登录
                      if (to.path === "/login") {
                        // 用户已经登录了，但是又访问登录页面，这里直接跳转到用户列表页面
                        next("/");
                      } else {
                        //用户已经登录，并且访问其它页面，则运行访问
                        next();
                      }
                    } else {
                      //用户没有登录,并且访问的就是登录页，则运行访问登录页
                      if (to.path === "/login") {
                        next();
                      } else {
                        //用户没有登录，访问其它页面，则跳转到登录页面。
                        next("/login?redirect=" + to.fullPath);
                      }
                    }
                  });
            

            下面对登录组件进行修改

            const Login = {
                    data() {
                      return {
                        isLogin: window.isLogin,
                      };
                    },
                    template: `
            
                        登录
                        注销
                        
            `,
                    methods: {
                      login() {
                        window.isLogin = true;
                        if (this.$route.query.redirect) {
                          //动态添加路由：
                          this.$router.addRoutes([
                            {
                              path: "/",
                              component: App,
                              redirect: "/users",
                              children: [
                                {
                                  path: "/users",
                                  component: Users,
                                  meta: {
                                    auth: true,
                                  },
                                  // beforeEnter(to, from, next) {
                                  //   if (window.isLogin) {
                                  //     next();
                                  //   } else {
                                  //     next("/login?redirect=" + to.fullPath);
                                  //   }
                                  // },
                                },
                                { path: "/userinfo/:id", component: UserInfo, props: true },
                                { path: "/rights", component: Rights },
                                { path: "/goods", component: Goods },
                                { path: "/orders", component: Orders },
                                { path: "/settings", component: Settings },
                              ],
                            },
                          ]);
                          this.$router.push(this.$route.query.redirect);
                        } else {
                          this.$router.push("/");
                        }
                      },
                      logout() {
                        this.isLogin = window.isLogin = false;
                      },
                    },
                  };
            

            在登录成功后，通过addRoutes方法动态的添加路由规则，也就是所添加的路由规则只能是在登录以后才能够访问，所以全局守卫的判断条件发生了变化，不在判断是否有元数据，而只是判断是否登录。如果登录了，想访问上面的路由规则，则运行访问，如果没有登录则不允许访问。

            注意：对应的原有的路由规则应该注释掉。

            完整代码如下：

            12、路由组件缓存

            利用keepalive做组件缓存，保留组件状态，提高执行效率。

            使用include或者exclude时要给组件设置name（这个是组件的名称，组件的名称通过给组件添加name属性来进行设置）

            当我们进行路由切换的时候，对应的组件会被重新创建，同时数据也会不断的重新加载。

            如果数据没有变化，就没有必要每次都重新发送异步请求加载数据

            现在，在App组件中添加keep-alive

            因为切换的组件都是在该router-view中进行展示。