(八) vue-router

一、vue - router

vue - router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
官网：[https://router.vuejs.org/zh/]

一、安装和使用

安装：npm install vue-router--save
使用：
第一步：导入路由对象

import Vue from 'vue'
import VueRouter from 'vue-router'

第二步：调用

Vue.use(VueRouter)

第三步：创建路由实例，传入路由映射配置

const router = new Router({
  // 配置映射对象
  routes：[],
  mode: 'history',  // 模式指定
  linkActiveClass: 'active',  // 更改响应class属性
})

二、使用vue-router

1、创建路由组件

2、配置组件和路由映射

a、对于重定向路由使用redirect
b、对于子路由使用children,在父路由下添加
c、在路由实例中可以添加对应的设置mode\linkActiveClass\，这里的routes被抽离了出去，就是上图中的routes

const router = new Router({
  // 配置映射对象
  routes,
  mode: 'history',  // hash
  linkActiveClass: 'active',
})

d、使用绑定方法，指定路由

<button @click="btnHome">首页</button>
<button @click="btnAbout">关于</button>

  methods: {
    btnHome(){
      this.$router.push('/home')
    },
    btnAbout(){
      this.$router.push('/about')
    },
   }

3、使用路由<router-link>和<router-view>

<router-link to='/about' replace tag="h2" active-class="active">关于</router-link>

在调用的时候可以指定router-link 属性to路由、replace不可以返回上一页面、tag渲染出来的标签、action指定触发时class属性

动态路由

一、 传递参数方式一

需求：在路由中添加参数
1、指定参数路由

  {
    path: "/user/:id",
    component: User,
    meta:{
      title: "用户"
    }
  },

2、在要渲染的组件中获取数据

3、传入到连接中
第一种方式：

<router-link  :to='"/user/"+userid'>用户</router-link>

第二种方式：

4、获取url中的参数id

 this.$route.params

传递参数方式二

1、使用query

    <router-link  :to='{
        path: "/profile/"+123,
        query: {"name": "Ynag", "age": 18}
    }'>Profile页面</router-link>

2、获取参数

结果

导航懒加载

作用：打包时，组件js代码分开打包。提高加载效率。

导航守卫

一、什么是导航守卫？

1、vue-router提供的导航守卫主要用来监听路由的进入和离开
2、vue-router提供了beforeEach和afterEach的钩子函数，它们会在路由即将改变前和改变后触发。
参数：
to:即将进入目标的路由对象
from:当前导航即将离开的路由对象
next:调用该方法后，才能进入下一个钩子

如果使用afterEach，不需要主动调用next()函数

在全局配置的导航守卫，称之为全局守卫，其他的还有路由独享的守卫、组件内的守卫

路由独享守卫

组件内守卫


官网：[https://router.vuejs.org/zh/guide/advanced/navigation-guards.html]

keep-alive

说明：keep-alive是vue内置的一个组件，可以使被包含组件保留状态，活避免重新渲染。
1、include 字符串或正则表达式，只有匹配的组件会被缓存
2、exclude 字符串或正则表达式，任何匹配的组件都不会被缓存

router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存：

当使用keep-alive时，会存在activated(0和deactivated()

排除某个组件不需要保持状态