Vue学习4：Vue-router

Vue学习4：Vue-router

一、认识路由

路由器提供了两种机制：路由和传送

• 路由是决定数据包从来源到目的地的路径
• 传送将输入端的数据转移到合适的输出端
• 路由内有一个路由表，决定了数据包的指向

1. 后端路由与前端路由

后端路由阶段


前后端分离阶段：每个url对应静态资源服务器中的一套html + css + js（url -> html + css + js）


SPA阶段：
引入前端路由概念，一开始就从静态服务器获得全部资源，当在页面操作时不同url会通过前端路由，查找对应的页面（url -> 页面/组件）


实现方式：

• 直接修改location.hash，也就是修改锚点，能够改变href，这时候会引发前端路由，找到合适的页面进行展示，不发生页面刷新（也就是不会向服务器发起请求）。location.hash='aaa'
• 通过history.pushState也可以改变url，页面不刷新。history.pushState({}, '', 'home')。同时这是一种对页面的压栈操作，可以通过history.back()或者history.go(-1)出栈一个页面，也就是返回上一层。同样有history.forward()和history.go(1)。
• 通过history.replaceState，页面不刷新。history.replaceState({}, '', 'home')。这个直接替换，没有返回操作。

二、Vue-router基本使用

1. 基本使用

• 安装：npm install vue-router --save
• 使用：①导入路由对象，并且调用Vue.use(VueRouter) ②创建路由实例，并且传入路由映射配置 ③在Vue实例中挂载创建的路由实例

router -> index.js：

//配置路由相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'

//1. 导入路由对象，并且调用Vue.use(VueRouter) 
Vue.use(VueRouter)
//2. 创建路由实例，并且传入路由映射配置 
const router = new VueRouter({
     
  routes: []
})
//3. 在Vue实例中挂载创建的路由实例
export default router

在Vue实例中挂载

④创建一些组件，然后配置路由映射（之后使用懒加载）

⑤使用路由，在App.vue中
是vue-router中的内置组件，会被渲染成一个标签
会根据当前的路径动态渲染出不同的组件，占位的

或者

效果：

注意，想要展示的是http://localhost:8081/homeurl的话，要在router里面加mode: 'history'。

2. router-link的属性

to：指定跳转的路径
tag：指定router-link渲染成什么标签
replace：使用replaceState，让返回按钮不起作用
active-class：修改active时对应的类名，默认为router-link-active
如首页

3. 动态路由

结果：

注意区别：
$router是指路由对象
$route是指当前活跃的路由

4. 路由的懒加载

打包后的js文件：
app.js：业务代码，会随着项目的增大越来越大
manifest.js：底层支撑代码，把原来不同的js文件联系起来
vendor.js：第三方相关代码，如vue/vue-router/axios等

app.js的过大可能导致在显示页面时出现空白现象，所以，需要懒加载技术，用到时再加载。
最好是一个路由对应一个js文件，而不是一个app.js.
路由懒加载：将路由对应的组件打包成一个个小的js代码块，当这个路由被访问时，才加载

5. 嵌套路由

步骤：

• 创建子组件，并在路由映射中配置对应的子路由
• 在组件内部使用标签

6. 参数传递

• params类型：查看动态路由部分
• query类型：
  index.js
  

App.vue中通过v-bind来to到对象：
档案

获得数据：

效果：

另一种方式：不用to

补充知识点：

所有组件都继承自vue类的原型

7. 导航守卫

官方文档：导航守卫

导航守卫：对来回跳转的过程进行监听

需求：在不同网页显示不同的标题
index.js文件
使用前置守卫（guard）（回调）beforeEach


后置钩子router.afterEach((to, from) => {})

也可以在组件创建的生命周期函数created里面书写，但是会比较繁琐，每一给组件都要写

8. keep-alive

作用：防止被频繁创建(created)和销毁(destroyed)，增加活跃(activated)和不活跃(deactivated)，即被缓存下来

需求：

做法：
App.vue：对组件使用包裹

home.vue：

的两个属性

• include：字符串或正则表达式，只有匹配的组件(name)会被缓存
• exclude：不会被缓存
  也是一个组件，如果直接被包在里，匹配到的所有组件都会被缓存。

例如，想要Profile这个页面不被缓存：