介绍

对于router官方是这么介绍的 ：

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

说的简单点就是专门为了做单页面应用的。

相关的理解

vue-router的理解
vue集成的一个插件库，专门用来做SPA应用 这里跟vue官网说的相差不大。
对SPA应用的理解

  1. 单页面web应用 SPA全程就是single page web application，SPA
  2. 整个应用只有一个完整的页面
  3. 使用路由跳转时页面不会刷新,只会做页面的局部更新.
  4. 数据需要通过ajax请求后端来获取数据.

什么是路由?

Vue路由即vue-router，在web开发中，“router”是指根据url分配到对应的处理程序。
Vue路由有助于在浏览器的URL或历史记录与Vue组件之间建立链接，从而允许某些路径渲染与之关联的任何一个视图。
image

路由的分类

image

安装vue-router

vue2应该使用的路由版本是router3
vue3应该使用的路由版本是router4
npm：
vue2:npm i vue-router@3
vue3:npm i vue-router@4

编写router配置项

在router/index.js配置router

import Vue from 'vue'
import Router from 'vue-router'
 
//组件模块
import HelloWorld from '@/components/HelloWorld'
import List from '@/components/list'
import About from '@/components/about'

 
Vue.use(Router)
 
export default new Router({
  routes: [
    { path: '/', name: 'HelloWorld', component: HelloWorld },
    { path: '/list', name: 'List', component: List },
    { path: '/about',  name: 'Aabout', component: About},
    
  ]
})

在main里面引入配置好的router
main.js

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

页面中的路由跳转

跳转的连接
<router-link active-class="active" to="/about">About</router-link>
router-link会被替换成a标签
在指定位置显示
<router-view></router-view>

其他问题

  1. 路由的组件/src/pages中，一般组件通常存放在/src/components文件夹
  2. 被切换走的路由是被销毁了。当然也可以通过keep-alive来保证组件不被销毁具体使用这是后话了，在下面看详情。
  3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。整个路由有一个大的$router属性

router routes route

1.router：路由器（new的路由器对象），包含一些操作路由的功能函数，来实现编程式导航。一般指的是在任何组件内访问路由。如：路由编程式导航的$ router.push()
2.routes：指创建vue-router路由实例的配置项。用来配置多个route路由对象
3.route：指路由对象表示当前激活的路由的状态信息。一般用来获取页面信息.如：this.$route指的是当前路由对象，path/meta/query/params
$router$route这俩简单的区别：这样说好像也没什么毛病。
$router : 是路由操作对象，只写对象；
$route : 路由信息对象，只读对象。

多级路由

什么是多级路由：所谓多级路由，就是在一级路由内部增加一个children属性
多级路由的作用：就是可以在路由的里面再进行路由的切换。一般来说套4层就是很大了。

export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About,
            
        
        },
        {
            path:'/home',component:Home,
            children:[
                {
                    path:'news',
                    component:News,
                },
                {
                    path:'message',
                    component:Message,
                }
                ]
        
        
        },
    ]
})

页面跳转连接：
<router-link to="/home/news">News</router-link>

路由的query传参

传递参数：

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">跳转</router-link>
                
<!-- 跳转并携带query参数，to的对象写法（推荐） -->
<router-link 
    :to="{
        path:'/home/message/detail',
        query:{
           id: m.id,
                   title: m.title }
         }"
>跳转</router-link>

接收参数：数据传到哪个组件就在哪个组件中接收：

$route.query.id
$route.query.title

命名路由

简称给路由加一个别名 属性名为nam值为你要起的别名 例如：name:'newsName', 当然name属性是可以跟path属性同时存在的。
跳转的时候也可以使用name作为跳转对象。vue会通过别名找到要跳转的路径
例子：跳转

路由的 params 参数

image
image

路由的 props 配置

image


   第一种对象的写法props:{years:'2022',day:8}

   第二种props:true 当 props 设置为 true 时，route.params 将被设置为组件的 props。
props:function($route){ 第三种
    return {id:$route.params.id,title:$route.params.title}
}

路由的跳转的方法

路由跳转分为两种方法一种是push(默认)另一种是replace
作用：控制跳转浏览器的历史记录 说白就是控制你的前进后退的里面有个容器里面存着你的跳转记录push是追加模式你的记录都保容器存在里面而replace是替换模式就留一条在里面。
如何开启replac
News
简写News

编程式路由导航，不用

分为5大类：

  1. this.$router.push({}) push追加记录的方法
  2. this.$router.replace({}) replace替换模式
  3. this.$router.forward() 前进函数执行一次就是前进
  4. this.$router.back() 执行一次就是后退一次
  5. this.$router.go(n) 可前进也可后退，n为正数前进n，为负数后退
<template>
    <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header">
            <h2>Vue Router Demo</h2>
            <button @click="back">后退</button>
            <button @click="forward">前进</button>
            <button @click="test">测试一下go</button>
        </div>
    </div>
</template>

<script>
    export default {
        name:'Banner',
        methods:{
            back(){
                this.$router.back()
            },
            forward(){
                this.$router.forward()
            },
            test(){
                this.$router.go(3)
            }
        },
    }
</script>
<button @click="pushShow(m)">push查看</button>
<button @click="replaceShow(m)">replace查看</button>


methods:{
            pushShow(m){
                this.$router.push({
                    name:'detailName',
                    params:{id:m.id,title:m.title},
                    }).catch(()=>{console.log("你重复点击了6")})
            },
            replaceShow(m){
                this.$router.replace({
                    name:'detailName',
                    params:{id:m.id,title:m.title},
                }).catch(()=>{})
            }
            
        },

image

keep-alive

参数：
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。
当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

image
image

路由元信息

定义路由的时候可以配置 meta 字段：
meta: { requiresAuth: true } 写在routes里面的一个配置
如何调用meta里面的信息：to.meta.isAuth 这个to就是守卫方法接收的参数。

路由守卫

分类：全局守卫、独享守卫、组件内守卫

全局守卫

全局前置守卫：初始化时、每次路由切换前执行
全局前置守卫beforeEach每一次路由切换之前都会帮你执行一个函数 初始化的时候也调用

router.beforeEach((to, from, next) => {...})

image

全局后置钩子

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：
router.afterEach((to, from) => {
// ...
})

//每次路由切换后执行
router.afterEach((to,from) => {
    console.log('afterEach',to,from)
    if(to.meta.title){ 
        document.title = to.meta.title //修改网页的title
    }else{
        document.title = 'vue_test'
    }
})

独享守卫

你可以在路由配置上直接定义 beforeEnter 守卫 说人话也就是可以在routes里面配置的守卫
作用：加载到该页面之前做的十事情

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内守卫

这个词语更接地气了，说白了就是写再组件内的守卫

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {... next()},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {... next()},
 beforeRouteUpdate(to, from, next) {}，

1.对于官方说的【在当前路由改变，但是该组件被复用时调用】的理解：路由路径不变，调用的是同个界面，即组件被连续复用的时候，会调用到beforeRouteUpdate触发

2.对于官方说的【对于一个带有动态参数的路径】的理解：即触发beforeRouteUpdate的api调用为：需要用this.$router.push(path:'foo',query:{id:1})这个api来触发，不能用this.$router.push(name:'foo',params:{id:1})

image

image

image

路由器的两种工作模式，hash模式与history模式

默认hash模式

image