Vue-Router 路由Vue-router 的本质就是在前后端分离的基础上，加了一层前端路由。前端路由的核心：改变

Vue-router 的本质就是在前后端分离的基础上，加了一层前端路由。

前端路由的核心：改变URL，但是页面不进行整体刷新。

URL 的 hash 和 HTML5 的 history

两者在改变 url 地址时，并不会刷新整个页面，只会局部刷新，也不会重新请求已经请求的数据。

URL的hash就是通过window的location的API改变的URL地址的

location.hash = 'home'

html5 的 history 模式，本质上是一个栈(后进先出)，通过pushState将名称放入栈中。

history.pushState({}, '', 'home')
// 可以返回之前的url
history.back()

替换URL不能返回

history.replaceState({}, '', 'home')

前进后退

history.go(num)
num=-1 // 返回上一页
num=1  // 前进一页

Vue-router 基本配置

首先安装 vue-router

npm install vue-router
或者
yarn add vue-router

在vue中使用vue-router，配置一个简单路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/home/Home'
import About from '../components/about/About'

// 在vue中安装使用vue-router
// Vue.use本质上是调用Vue-router的install方法，并将它挂载到Vue.prototype上
Vue.use(VueRouter)

// 此处配置路由
const router = [
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    }
]

const router = new VueRouter({
    // 配置路由
	router
})

路由模式的选择

路由模式有三种

hash：默认的路由模式，url上会有一个#号符
history：html5 的路由模式，没有 # 号符
abstract：抽象路由，不管怎么跳转，地址都不会发生改变

const router = new VueRouter({
    router,
    // 选择路由模式
    mode: 'hash'
})

路由重定向

关键字 redirect，首次登陆时，定位到某一页面

const router = [
    {
      	path: '', // 或者 path: '/'
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    }
]

路由嵌套

主要是在父路由中通过 children 存入子路由

const router = [
    {
        path: '/home',
        component: Home,
        children: [
            // 子路由同样可以使用重定向
            {
                path: '/',
                redirect: 'news'
            },
            {
                path: 'news',
                component: News
            },
            {
                path: 'message',
                component: Message
            }
        ]
    }
]

路由懒加载

可以使用在使用组件时，或者是进入路由时，才会加载组件

改变组件的导入方式

const Home = () => import('../components/home/Home')

路由传参

路由传参分两种：

params 参数，直接在路由路径后面加参数，例如：http://www.localhost:3000/user/12
query 参会，是以键值对的方式显示在URL上，传对象，例如：http://www.localhost:3000/user?name='zhangsan&age=18'

使用 params 时，需要在路由配置上，动态路由参数

const router = [
    {
        path: '/home',
        component: Home
    },
    {
        path: '/user/:id',
        component: About
    }
]

//使用路由传参
// 声明式
<router-link to="/user/12"></router-link>
// 编程式
this.$router.push('/user/12')

//获取参数
this.$route.params.id

query，传递键值对模式的对象参数，不需要配置动态参数

// 使用路由传参
// 声明式
<router-link :to="{path: '/user', query: {name: 'lisi', age: 18}}"></router-link>
// 编程式
this.$router.push({
    path: '/user',
    query: {name: 'lisi', age: 18}
})

// 获取参数
this.$route.query.name

路由标题

路由标题，就是在路由meta属性中配置title

const router = [
    {
        path: '/home',
        component: Home,
        meta: {
            title: '首页'
        }
    }
]
// 获取
this.$route.matched[0].meta.title

路由导航守卫

before 全局前置守卫

在进行路由跳转时，在中间进行的某一步操作

传三个参数：

to：表示跳转到的目标路由对象
from：表示正要离开的路由
next：跳转点击的路由，必执行

next：next() 默认跳转下一个路由，next(false) 终止跳转，next('/') 跳转到某一页。

执行将title渲染到标签上

router.beforeEach((to, from, next) => {
    document.title = to.matched[0].meta.title
    next()
})

Vue-router 全局使用

声明式路由

跳转路由使用 router-link

展示路由 router-view

基本用法

<router-link to="/home" tag="button" replace active-class="active">Home</router-link>
<router-link to="/about" tag="button" active-class="active">About</router-link>
<router-link to="/user/123" tag="button" active-class="active">User</router-link>
<router-link :to="{path: '/profile', query: {name: 'lisi', age: 18}}" tag="button" active-class="active">Profile</router-link>
    
// 展示路由
<router-view></router-view>

在router-link中关键配置：

to：表示要跳转的路由
tag：路由的表示形式，button 表示按钮
replace：不能返回的路由
active-class：路由点击时的活跃状态

编程式路由

$router 跳转

跳转关键方式

push：可返回的跳转，栈结构，后进先出
replace：跳转进入不可返回原来的路由
go(param)：前进或者后退的路由
back：返回上一个路由
forward：返回前一个路由

路由缓存

keep-alive

使用

<keep-alive exclude="Home">
	<router-view></router-view>    
</keep-alive>

在跳转其他路由界面时，自身路由会被缓存（缓存不活动的组件），不会被销毁，它可以避免组件反复创建和渲染，有效提升系统性能。

exclude 排除缓存