Vue Router：

• vue的一个插件库，专门用来实现SPA应用

• 对SPA应用的理解：

  • 单页Web应用（single page web application，SPA）
  • 整个应用只有一个完整的页面
  • 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
  • 数据需要通过ajax请求获取

• 什么是路由：

  • 一个路由就是一组映射关系（key-value）
  • key为路径，value可能是function或component

• 路由分类：

  • 后端路由：

    • 理解：value是function，用于处理客户端提交的请求
    • 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回相应数据

  • 前端路由：

    • 理解：value是component，用于展示页面内容
    • 工作过程：当浏览器的路径改变时，对应的组件就会显示

基本使用：

• 安装

npm i vue-router@3

• 应用插件：Vue.use(VueRouter)
• 编写router配置项

//引入VueRouter
import VueRouter from 'vue-router'
//引入路由组件
import About from '../components/About'
import Home from '../components/Home'
​
//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/Home',
            component:Home
        },
    ]
})
//暴露router
export default router

• 实现切换（active-class可配置高亮）

<router-link active-class="active" to="/about">About</router-link>
<router-link active-class="active" to="/home">Home</router-link>

• 指定展示位置

<router-view></router-view>

• 几个注意点：

1.路由组件通常存放在pages文件夹，一般组件通常放在components文件夹

2.通过切换，”隐藏“了的路由组件，默认是被销毁的，需要的时候再挂载进去

3.每个组件都有自己的$router，可以通过组件的$router属性获取到

嵌套路由：

• 配置路由规则，使用children配置项

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}`">{{ -->
        <!-- 跳转路由并携带query参数，to的对象写法 -->
        <router-link
          :to="{
            path: '/home/message/detail',
            query: {
              id: m.id,
              title: m.title,
            },
          }"
          >{{ m.title }}</router-link>

• 接收参数

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

命名路由：

• 作用：简化路由的跳转
• 如何使用：

routes: [
    {
      name: "guanyu",
      path: "/about",
      component: About,
    }
]

• 简化跳转：

<router-link :to="{name;'guanyu'}">跳转</router-link>

params参数：

• 配置路由，声明接收params参数：

{
          path: "message",
          component: Message,
          children: [
            {
              name: "xiangqing",
              path: "detail/:id/:title",
              component: Detail,
            },
          ],
        },

• 传递参数：

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/66/您好"></router-link>
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link
          :to="{
            name: 'xiangqing',
            params: {
              id: 666,
              title: '你好啊',
            },
          }"
        >
          {{ m.title }}</router-link
        >

• 注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置

$route.params.id
$route.params.title

路由的props配置：

• 作用：让路由组件更方便的收到参数

{
    name:'xiangqing',
    path:'detail/:id',
    component:Detail,
// props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件
    // props: {
    //   a: 1,
    //   b: "hello",
    // },
// props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
    // props: true,
// props的第三种写法，值为函数，
    props($route) {
       return { id: $route.params.id, title: $route.params.title };
              },
}

replace属性：

• 作用：控制路由跳转时操作浏览器历史记录的模式
• 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录，路由跳转时候默认为push
• 如何开启replace模式：

<router-link replace ...>News</router-link>

编程式路由导航：

• 作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活
• 具体编码：

this.$router.push({
    name:'xiangqing',
        params:{
            id:xxx,
            title:xxx
        }
})
​
this.$router.replace({
    name:'xiangqing',
        params:{
            id:xxx,
            title:xxx
        }
})
this.$router.forward()//前进
this.$router.back()//后退
this.$router.go(3)//可前进也可后退

缓存路由组件：

• 作用：让不展示的路由组件保持挂载，不被销毁
• 具体编码：（include中写的是组件名）

<keep-alive include="News">
    <router-view></router-view>
</keep-alive>

两个新的生命周期钩子：

• 作用：路由组件独有的两个钩子，用于捕获路由组件的激活状态

• 具体名字：

  • activeted：路由组件被激活时触发
  • deactiveted：路由组件失活时触发

路由守卫：

• 作用：对路由进行权限控制
• 分类：全局守卫、独享守卫、组件内守卫
• 全局守卫：（写在路由index.js文件中）

//全局前置守卫：初始化时执行，每次路由切换前执行
router.beforeEach((to,from,next)=> {
    if(to.meta.isAuth) {
        if(localStorage.getItem('school') === 'ASD') {
            next();
        }else {
            alert('学校名不匹配，无权查看')
        }
    }else {
        next()
    }
})
​
//全局后置守卫：初始化时执行、每次路由切换后执行
router.beforeEach((to,from)=> {
    if(to.meta.isAuth) {
            document.title = to.meta.title
        }else {
            document.title = 'vue_test'
        }
})

• 独享守卫：（写在路由配置项里）

beforeEnter(to,from,next) {
    if(to.meta.isAuth) {
        if(localStore.getItem('school') === 'ASD'){
            next()
        }else {
            alert('学校名不匹配')
        }
    }else {
        next()
    }
}

• 组件内守卫：（写在组件内）

//进入守卫
beforeRouteEnter(to,from,next) {
}
//离开守卫
beforeRouteLeave(to,from,next) {
}

路由器的两种工作模式：

• 对于一个urI来说，什么是hash值？——#及其后面的内容就是hash值
• hash值不会包含在http请求中，即：hash值不会带给服务器

• hash模式：

  • 地址中永远带着#，不美观
  • 若以后将地址通过第三方手机app分享，若app严格校验，则地址会被标记为不合法
  • 兼容性较好

• history模式：

  • 地址干净，美观
  • 兼容性和hash模式相比略差
  • 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题