阅读 69

Vue的学习笔记-路由

路由

路由

网络工程的术语,通过互联网把信息从源地址传输到目的地址的活动。

路由表:实际上是一个映射表,决定了数据包的指向。

前端渲染 vs 后端渲染

  • 早前前端开发

    • 后端渲染: 服务器直接生成渲染好的HTML页面,返回给客户端

    • 后端路由:后端处理URL和页面之间的映射关系

    • 后端路由的缺点: 1. 整个页面都有后端来编写 2. 代码逻辑混乱 3. 前端开发需会PHP等技术

  • 前后端分离阶段

    • Ajax的出现,产生了前后端分离的开发模式

    • 后端只负责数据,不负责任何页面的展示内容

    • 前端渲染:浏览器中大部分内容都是由前端js代码在浏览器中执行并最终渲染的

  • SPA 单页面富应用阶段

    • 在前后端分离的基础上加了一层前端路由

    • 前端路由:URL和页面之间的映射关系由前端处理,核心是改变URL但是页面不进行整体刷新

Vue Router

vue-router是Vue.js官方路由插件,适合用于构建单页面应用。

使用流程

  1. 安装vue-router  npm install vue-router

  2. 导入路由对象,并通过 Vue.use() 明确地安装路由功能

  3. 创建路由实例,并传入路由映射配置

  4. 使用路由: 通过<router-link><router-view>

// 导入Vue import Vue from 'vue' // 导入router import VueRouter from 'vue-router' // 1. 通过vue.use(插件),安装插件 Vue.use(VueRouter) // 2. 创建vueRouter对象 const router = new  VueRouter({   routes: [  {       path: "/home", name: 'home', // 可以给路由命名       component: Home     } ] mode: 'history', // 使用url的hash 或者 history })  // 3. 导出 export default router // 4. 挂载 new Vue({   el: '#app',   router,   render: h => h(App) }) // 5.使用 <!-- to:指定跳转路径, tag: 渲染标签类型--> <router-link to="/home" tag="button" replace active-class="active">首页</router-link> <router-link to="{name:'home'}">首页</router-link> <router-view></router-view> 复制代码

路由的重定向

const router = new VueRouter({   routes: [     { path: '/a', redirect: '/b' }   ] }) 复制代码

路由懒加载

当打包构建应用的时候,JavaScript包会非常大,影响页面加载。如果一次性从服务器请求下来这个页面,需要花费时间,甚至有可能出现短暂空白的情况。

路由懒加载:将路由对应的组件打包成一个个的js代码块,只有这个路由被访问的时候才能加载对应组件。

const Foo = () => import('./Foo.vue') const router = new VueRouter({   routes: [{ path: '/foo', component: Foo }] }) 复制代码

嵌套路由

嵌套路由比较常见,eg:我们在home中想要访问 /home/news和/home/message内容。

一个路径映射一个组件,访问这两个路径也分别渲染两个组件。

// 1. 创建对应子组件,并在路由映射中children会对应的子路由 {   path: "/home",   component: Home,   children:[     {       // 路由默认路径       path: "",       // 重定向       redirect: "news"     },     {       // 不加杠       path: "news",       component: HomeNews     },     {       path: "message",       component: HomeMessage     }   ] } // 2. 在组件内部使用<router-view>标签 // 在home中使用 <router-link to="/home/news">新闻</router-link> <router-link to="/home/message">消息</router-link> <router-view></router-view> 复制代码

动态路由

在某些情况下,一个页面的路径不确定。需要根据不同的参数来渲染不同给的页面。

我们可以配置动态路由,来匹配path和component之间的关系。

// 在路由中配置 const router = new  VueRouter({   routes: [  {     path: "/user/:userId", // 动态路径参数       component: User     } ] mode: 'history', // 使用url的hash 或者 history })  // 在App组件中使用 <router-link v-bind:to="'/user/'+userid">用户</router-link> // 子组件中获取参数 computed: {     userId() {         // 获取userid,通过参数         return this.$route.params.userId // 设置路径参数,对应的值会设置到 $route.params中     } } 复制代码

路由传递数据方式

传递参数主要有两种方式: params和query

动态路由 params

在某些情况下,一个页面的path是不确定。eg: /user/aaa

这种path和component之间的匹配关系,为动态路由

// 配置动态路由 {       path: "/user/:userId",       component: User } // App组件中使用 <router-link v-bind:to="'/user/'+userid">用户</router-link> // 子组件中使用参数 computed: {     userId() {         // 获取userid,通过参数         return this.$route.params.userId     } } 复制代码

query方式

// 1. 配置正常路由 {   path: "/profile",   component: Profile } // 2.1 在组件中使用 <router-link :to="{path:'/profile', query: {name: 'why', age: 18}}">档案</router-link> // 2.2 在组件中使用方法 <button @click="profileClick">档案</button> profileClick() {   this.$router.push({     path: "/profile",     query: {       name: "why",       age: 18     }   }) } // 3. 在子组件中拿到参数 <p>我是Profile组件 {{$route.query.name + $route.query.age}}</p> 复制代码

vue-router模式

URL的hash模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

//通过更改hash改变地址 location.hash = '/foo' 复制代码

URL的history模式

如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

// pushState history.pushState({}, '', '/foo') // replaceState history.replaceState({}, '', '/foo') // back history.back() // forward history.forward() // go history.go(-1) // 同history.back() history.go(1) // history.forward() 复制代码

keep-alive

用来包裹组件,使被包含的组件保留状态或避免重新渲染。

  • include - 字符串或正则表达式,只有匹配的组件会被缓存

  • exclude -  字符串或正则表达式,任何匹配的组件都不会别缓存

<keep-alive exclude="Profile,User">   <router-view></router-view> </keep-alive> 复制代码

导航守卫

vue-router提供的导航守卫主要用来监听路由的进入和离开

// 前置钩子 -》 路由即将改变触发 router.beforeEach((to, from , next)=> {   // 从from跳转to   document.title = to.matched[0].meta.title   // next必须调用   next() }) // 后置钩子 -》路由改变后触发 router.afterEach((to, from) => { }) 复制代码

除了全局守卫,还有路由独享的守卫和组件内的守卫。


作者:JessieLi
链接:https://juejin.cn/post/7023676800307822599


文章分类
后端
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐