vue-router总结

1,368 阅读4分钟

1. 安装和引入

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌
安装: cnpm i vue-router -S
引入:import Router from 'vue-router

2. 往router/index.js里添加首页的配置

在src目录下,创建router文件夹。并在router文件夹下创建index.js作为路由配置的主要文件, 以后页面的路由文件都在router文件夹下的index.js文件中进行配置。

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/',
            redirect: '/home'
            // 可以直接在component中将组件通过箭头函数返回,省去了在头部import引入
            // component: () => import('@/views/index')  
        },
        {
            path: '/home',
            name: 'Home',
            component: () => import('@/views/home')
        },
        // 当匹配不到路由中定义的路径时,重定向到首页
        {
            path: '*',
            redirect: '/'
        }
    ]
});

3. 在main.js入口文件中引入并注入到vue实例中

在main.js中引入router文件夹下的index.js,如果不写router文件夹的下一级路径, 默认查找index.js

import router from './router'
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

4. 在App.vue项目跟页面中使用路由

路由的基本配置都已经完成。 但是页面中显示路由相对应的组件在哪显示呢? Vue的路由渲染机制是组件循环嵌套。 所以首先要有个根组件,显示根路由组件里的内容, 一般放在App.vue中的 <router-view/>中。 这就是项目的根文件, 默认匹配的是路由配置中的path: /, 可以在这里进行配置相应的路由组件, 或者redirect重定向到其他组件。

<!-- 路由匹配到的组件将渲染在这里 -->
<template>
  <div id="app">
    <router-view />
  </div>
</template>

到这一步, 基本的vue-router已经搭建完成。 已经可以使用vue-router中的各种方法和属性去进行vue-router相关的操作了。下面的就是vue-router中的其他知识点了


5. vue-router实现原理

SPA(single page application):单一页面应用程序,只有一个完整的页面;它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面;vue-router在实现单页面前端路由时,提供了两种方式:Hash模式和History模式;根据mode参数来决定采用哪一种方式

1. Hash模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 hash(#)是URL 的锚点,代表的是网页中的一个位置,单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页,也就是说hash 出现在 URL 中,但不会被包含在 http 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面;同时每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置;所以说Hash模式通过锚点值的改变,根据不同的值,渲染指定DOM位置的不同数据。hash 模式的原理是 onhashchange 事件(监测hash值变化),可以在 window 对象上监听这个事件

2. History模式

由于hash模式会在url中自带#,如果不想要很丑的 hash,我们可以用路由的 history 模式,只需要在配置路由规则时,加入"mode: 'history'",这种模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈,在当前已有的 back、forward、go 基础之上,它们提供了对历史记录修改的功能。只是当它们执行修改时,虽然改变了当前的 URL ,但浏览器不会立即向后端发送请求

6. 总结vue-router使用方式

1:下载 cnpm i vue-router -S
2:在main.js中引入 import VueRouter from 'vue-router'
3:安装插件Vue.use(VueRouter)
4:创建路由对象并配置路由规则 export default new VueRouter({routes:[{path:'/home',component: () => import('@/views/home') }]})
5:将其路由对象传递给Vue的实例,options中加入router:router
6:在App.vue中留坑 <router-view></router-view>

7. $route$router的区别

$route 是“路由信息对象”,包括 path,params,hash,query,fullPath,matched,name 等路由信息参数。

  1. $route.path: 字符串,对应当前路由的路径,总是解析为绝对路径,如 "/order"。

  2. $route.params: 一个 key/value 对象,包含了 动态片段 和 全匹配片段, 如果没有路由参数,就是一个空对象

  3. route.query: 一个key/value对象,表示URL查询参数。 例如, 对于路径/foo?user=1, 则有$route.query.user为1, 如果没有查询参数, 则是个空对象。

  4. $route.hash: 当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串

  5. $route.fullhash: 完成解析后的URL,包含查询参数和hash的完整路径

  6. $route.matched: 数组, 包含当前匹配的路径中所包含的所有片段对应的配置参数对象

  7. $route.name: 当前路径名字

$router 是“路由实例”对象,即使用 new VueRouter创建的实例,包括了路由的跳转方法,钩子函数等

$router的方法有$router.go(), $router.push(), $router.replace()等等

8. vue传参页面刷新数据丢失问题

vue进行页面跳转传递数据的时候, 会存在刷新页面数据丢失的问题。以下是总结的几点解决方案

  1. 通过query传参。
const queryObj = JSON.stringify({
    name: 'andy',
    gender: 1,
})
this.$router.push({name: 'test', query: {queryObj}});
// 接收页面
let getObj = JSON.parse(this.$route.query.queryObj);
  1. 通过params的 :后面传参刷新不会丢失数据 在路由path里定义一个参数, 用于组件传递。
// 路由
path: '/testView/:user'
// 传递pparams参数的页面
this.$router.push({name: 'nextUrl', params: {user: targetUser}});
// 接收页面
let getUser = this.$route.params.user;
  1. 通过vuex进行存取
  2. 还是params传参。 配合localStorage。 在created的时候存储到缓存中, 在destoryed的时候清除这个缓存

9. 动态路由

router.options.routes = s;
router.addRoutes(s);