vue三大重点之vue-router

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就相当于占位符会显示绑定的组件里的内容。

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/category">分类</router-link>
    <router-link to="/about">关于</router-link>
    <router-view/>
  </div>
</template>

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路由中。

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