vue三大重点之vue-router

左手的ㄟ右手 2021-09-03 05:26 389阅读 0赞

# vue三大重点之vue-router #

## 1、什么是vue中的前端路由思想？ ##

所谓后端路由就是用户在浏览器地址请求url然后后端的controller就会跳转到对应的这个url请求的页面。

前端路由则是用户在浏览器地址请求url的时候服务器就会一次性把所有的静态资源都给请求下来了（html+css+js），然后在前端里通过js里写一些判断逻辑然后将对应的html页面加载出来。甚至单页面富应用的话就只请求一个html页面，但是后续切换页面的时候则会直接利用js生成新的html代码从而加载到页面上。

## 2、浏览器不改变url从而加载页面 ##

在js中前端想要请求到新的页面需要使用`windows.href='url'`方法会跳转到对应的页面并且浏览器的url页面相应改变，但是这样每请求一个页面就会刷新一次页面，每重新刷新一次页面就会重新向后端发起一次请求。这样不太符合前端路由的思想，于是有了`windows.hash='url'`，这样可以直接修改页面的url但是不会重新刷新页面。

同时还有一种方法`history.pushState(data,title,url)`是类似栈的结构，可以改变页面的url，但是不会刷新页面，同时遵循先进后出的规则。使用浏览器的返回按键或者`history.back()`或者`history.go(-1)`就可以返回上一页，实际上也就是出栈。同时也可以使用浏览器的前进按钮或者`history.forward()`或者`history.go(1)`前进的前一页。

## 3、什么是vue-router？ ##

vue-router则就是vue官方用来实现vue的前端路由思想的官方组件

## 4、使用vue-router ##

1.  安装vue-router
    
    安装vue-router可以在利用脚手架构建项目的配置选项里安装vue-router，也可以在后续利用
    
        npm install vue-router --save
    
    来安装。（–save是开发和运行环境都需要安装）
2.  创建router模块
    
    需要先在src文件夹下新建router文件夹，然后再在里面创建index.js文件
    
        // 1、导入vue和vue-router
        import Vue from "vue";
        import VueRouter from "vue-router";
        
        // 2、利用vue的use()全局使用vue-router插件
        Vue.use(VueRouter);
        
        // 3、创建VueRouter对象并且配置好routes
        const router = new VueRouter({ 
          routes: [
        
          ]
        });
        
        // 4、导出router
        export default router;
3.  在主入口main.js里导入router并注册
    
        import Vue from 'vue'
        import App from './App'
        // 导入router
        import router from "./router";
        
        Vue.config.productionTip = false
        
        /* eslint-disable no-new */
        new Vue({ 
          el: '#app',
          // 启用router
          router,
          render: h => h(App)
        })

## 5、routes的配置 ##

先利用import导入组件，再配置routes将对应的component组件与path路径对应，并且将url的显示模式从hash修改到history模式

// 3、创建VueRouter对象并且配置好routes
    const router = new VueRouter({ 
      routes: [
        // 主页
        { 
          path: '/',
          redirect: '/home'
        },
        { 
          path: '/home',
          component: Home
        },
        { 
          path: '/category',
          component: Category
        },
        { 
          path: '/about',
          component: About
        }
      ],
      // 将默认的url显示默认修改为history
      mode: 'history'
    });

## 6、router-link和router-view ##

router-link就相当于超链接，router-view就相当于占位符会显示绑定的组件里的内容。

## 7、vue-router的内置对象$router ##

$router是vue-router组件的内置对象之一，可以利用$router来获取到整个路由对象，然后利用路由对象的push或者replace方法跳转页面。

this.$router.push()

同时还可以在push方法里塞入query，向下一个页面传递参数

this.$router.push({ 
        path: '',
        query: { 
            
        }
    });

## 8、vue-router的内置对象$route ##

$route也是vue-router组件的内置对象之一，可以利用$route来获取到当前活跃的路由的相关参数。比如利用$route.query就可以获取到刚刚传递过来的参数，$route.path就可以获取到当前页面的路径

## 9、内置对象$router和$route的区别 ##

那我们就需要搞清楚Vue的内置对象router和route的区别。先讲之前我先给这两个单词取两个名字，router叫路由器，route叫路由（组）。

export default new VueRouter({ 
      //配置路由和页面的映射关系
      routes: [
        { 
          //网站进去的第一个页面
          path: '/',
          // 重定向到/home的url
          redirect: '/home'
        },
        { 
          // 输入/home时就会跳转到Home页面
          path: '/home',
          component: Home,
          // 子路由组件
          children:[
            { 
              path: '',
              redirect: 'news'
            },
            { 
              path: 'news',
              component: HomeNews
            },
            { 
              path: 'message',
              component: HomeMessage
            }
          ]
        },
        { 
          // 输入/about时就会跳转到About页面
          path: '/about',
          component: About
        },
        { 
          path: '/user/:userId',
          component: User
        },
        { 
          path: '/profile',
          component: Profile
        }
      ],
      // 将默认的url显示默认修改为history
      mode: 'history',
      // router-link被选中时添加class属性active
      linkActiveClass: 'active'
    });

在Vue中，我们在index中导出的这整个模块就叫router路由器，然而在router里面配置的routes路由组就是路由的集合。所以不难理解 ，router就是能够控制所有路由的对象，而route就是能够被路由器控制并且跟各个组件（页面）绑定的对象。比如：

{ 
          // 输入/about时就会跳转到About页面
          path: '/about',
          component: About
        },

就是一个route。

所以，我们就可以利用`this.$router.push()`来控制各个路由之间的跳转，并且在跳转的过程中携带参数。

而我们就可以利用`this.$route.params`或者`this.$route.query`来获得跳转过程中的参数。因为router只负责跳转，跳转完后就失效了，参数都是直接存到各个route路由中。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc0NzA4MA_size_16_color_FFFFFF_t_70_pic_center]

所以，涉及到跳转页面相关的就使用router，涉及到跳转后需要使用参数的就是用route。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc0NzA4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/ae08d7521445452790683e25138f139e.png