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的问题
最后修改:2024 年 07 月 26 日
如果觉得我的文章对你有用,请随意赞赏