vue路由

瑞雪纷纷
139 阅读3分钟

路由

单页面应用

概念：

单页应用的全称是 single-page application，简称 SPA，它是一种网站应用的模型，它可以动态重写当前的页面来与用户交互，而不需要重新加载整个页面。

1、router插件

描述：

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

包引入

npm install vue-router@4 --save

在src文件下创建router文件放置index.js

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

const routes = [
    {
        path: '/',
        component: login,
    },
    {
        path: '/login',
        component: login,
    },
    {
        path: '/home',
        name: 'home',
        component: home,
        children:[
            {
                path:'/my',
                component:my
            }
        ]
    },
]

const router = createRouter({
    history: createWebHashHistory(), //Hash模式
    history:createWebHistory()       //hitory模式
    routes,
})

export default router

入口文件

import router from './router.js'
app.use(router)

使用

<p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
2、路由传参
<div>用户名：<input type="text" v-model="form.user"></div>
<div>密&nbsp;&nbsp;&nbsp;码：<input type="text" v-model="form.pass"></div>
<button @click="sub">登陆</button>

sub() {
            this.$router.push({             //编程式导航
                name: 'home',
                query: {
                    user: this.form.user,
                }
            })
        }
           
mounted(){
        console.log(this.$route.query)
    }

路由传参.jpg

动态路由传参.jpg

3、Vue Router 支持两种路由模式：

  1. 哈希模式：使用URL的 hash 来模拟一个完整的URL，当 URL 发生改变时，页面不会重新加载。在许多前端单页应用程序中，这种模式非常常见。

    缺点: url地址hash值#看作不美观

  2. 历史模式：使用 HTML5 history API 提供的 pushState 和 replaceState 来完成 URL 跳转而无须重新加载页面。此模式下的 URL 可以和正常的 URL 完全一样，没有 # 中间的部分。在这种模式下，需要服务器端进行配置以防止 404 错误。因为在像 Apache HTTP Server 这样的 web 服务器中，请求的 URL 是由服务器解释的，但如果 URL 不是服务器已知的，很可能返回一个 404 错误。

4、重定向与错误处理

重定向和错误处理0.jpg

 {
   path:'/:pathMatch(.*)*',
   component:Error404
 }

导航守卫：

  1. 全局前置守卫(beforeEach)：在路由跳转前执行，用于检测用户是否有权限或者跳转前需要执行一些操作。
  2. 全局解析守卫(beforeResolve)：在路由被匹配后，但是在组件渲染之前执行，用于获取异步数据并确保在渲染组件前完成加载。
  3. 全局后置守卫(afterEach)：在路由跳转后执行，用于记录用户行为或者执行一些界面动画等操作。
  4. 路由独享守卫：应用于某个具体的路由的守卫，可以通过在路由配置中设置 beforeEnter 属性来定义。
beforeEnter: (to, from) => {
        console.log('beforeEnter to :', to, '  from ', from)
    },

5.组件内守卫：在组件内路由跳转时执行，包括 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave

组件内守卫主要包括以下三个钩子函数：

  1. beforeRouteEnter：在路由进入组件前被调用，此时组件实例尚未被创建，因此不能在此钩子中访问组件实例 this。

  2. beforeRouteUpdate：在当前组件已存在时（即在组件复用时）路由更新时被调用，可以访问到 this 组件实例。

  3. beforeRouteLeave：在路由离开组件时调用，可以访问到 this 组件实例，可以用于防止用户在未保存修改时误操作离开页面等场景。

组件生命周期和导航守卫可相互结合使用，从而实现更精细的控制。

在路由切换时，组件的生命周期钩子函数会被触发。例如，当组件首次创建时，Vue 会按照以下顺序调用钩子函数：

  1. beforeRouteEnter
  2. beforeCreate
  3. created
  4. beforeMount
  5. mounted`
  6. activated
  7. beforeUpdate
  8. updated

当组件被缓存时，Vue 会调用以下钩子函数：

  1. activated
  2. beforeRouteUpdate
  3. updated

最后，当组件被销毁时，会调用以下钩子函数：

  1. deactivated
  2. beforeDestroy
  3. destroyed

导航完整解析.jpg

路由懒加载
component: ()=>import('../views/Manager.vue'),  //使用时才加载路由

component:组件名                                //一开始就加载
avatar
文章
阅读
粉丝