Vue Router 的使用

Posted 2020-11-26 yuxi2018

什么是路由

路由是根据不同的url地址展示不同的内容或页面。可分为前端路由和后端路由。

后端路由：通过用户请求的url导航到具体的html页面；每跳转到不同的URL，都是重新访问服务端，然后服务端返回页面，页面也可以是服务端获取数据和模版组合，返回HTML，也可以是直接返回模版HTML，然后由前端再去请求数据，使用前端模版和数据进行组合，生成想要的HTML。（意味着，浏览器刷新页面。网速慢的话说不定屏幕全白再有新内容）

简单来说路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。大致流程如下：

• 浏览器发送请求
• 服务器监听到80端口(或443)有请求过来，并解析url路径
• 根据服务器的路由配置，返回相应信息 (可以是HTML字符串，也可以是JSON数据，图片等)
• 浏览器根据数据包的Content-Type来决定如何解析数据

前端路由：对于单页面应用程序(SPA)来说，主要通过url中的hash(#号)来实现不同页面之间的切换。同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现。这种切换页面的方式，称作前端路由。

前端路由更多用在单页应用上，也就是SPA。因为单页应用，基本上都是前后端分离的，后端自然也就不会给前端提供路由。在单页应用中，大部分页面结构不变，只改变部分内容的使用。

优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户

缺点：使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。在单页应用中无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置。

前端路由两种模式

hash 模式： 通过改变url上的hash值，监听onhashchange事件，优点是可以兼容低版本浏览器，缺点是太丑。如：http://www.xxx.com/#/login

history 模式： 通过HTML5的historyAPI，监听popState事件，通过pushState和replaceState这两个API可以改变url地址且不会发送请求。用HTML5实现的单页路由的url就不会多出一个#，变得更加美观。因为没有#号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种请，所以这个实现需要服务器的支持，需要把所有的路由都重定向到跟页面。如：http://www.xxx.com/login

前端渲染

是指后端返回JSON数据，前端利用预先写好的HTML模版，循环读取JSON数据，拼接字符串(ES6的模版字符串特性大大减少了拼接字符串的成本)，并插入页面。

优点：网络传输数据量小。不占用服务端运算资源(解析模版)，模版在前端，修改结构改变交互都前端自己来了，改完自己调就行。

缺点：前端耗时较多，对前端工作人员水平要求相对较高。前端代码较多，因为部分以前在后台处理的交互逻辑交给了前端处理。占用少部分客户端运算资源用于解析模版。SEO友好度：差，大量使用ajax，多数浏览器不能抓取ajax数据。

后端渲染

前端请求，后端用后台模版引擎直接生成html，前端接受到数据之后，直接插入页面。

优点：前端耗时少，减少了首屏时间，模版统一在后端。不占用客户端运算资源。SEO友好度： 好

缺点：占用服务器资源

vue-router使用步骤

第一步：安装vue-router库

npm install vue-router --save

第二步：如果在一个模块化工程中使用，必须要通过Vue.use()明确地安装路由功能

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'
// 安装Vue-router
Vue.use(VueRouter);
</script>

第三步：创建 router实例，设置routes配置

<script>
    // 定义路由组件
    const Login = {
        template: '<p>登录组件</p>'
    }    
    const Register = {
        template: '<p>注册组件</p>'
    }
    // 设置路由配置
    const routes = [
        { path: '/login', component: Login },
        { path: '/register', component: Register }
    ]
    // 创建 router 实例
    const router = new VueRouter({
        routes // 传入路由配置 
    });
</script>

第四步：在vue根实例配置选项中通过router配置参数注入路由。在任何组件内通过this.$router访问路由器，可以通过this.$route访问当前路由

<script>
    // 创建vue实例并挂载，注入路由
    new Vue({
        router 
    }).$mount('#app');
</script>

第五步：在组件中添加路由出口

<div id="app">
    <!-- 使用 router-link 组件来导航 -->
    <router-link to="/login">Login</router-link>
    <router-link to="/register">Register</router-link>
    
    <!-- 添加：路由出口 - 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

this.$router 和 this.$route 的区别

$route:为当前路由跳转对象，可以获取当前路径中的参数，可以通过watch监听路径的变化

$router:为VueRouter实例，想要导航到不同URL，则使用$router.push()方法，主要用作于编程式导航