Vue的学习笔记-路由
路由
路由
网络工程的术语，通过互联网把信息从源地址传输到目的地址的活动。
路由表：实际上是一个映射表，决定了数据包的指向。
前端渲染 vs 后端渲染
早前前端开发
后端渲染： 服务器直接生成渲染好的HTML页面，返回给客户端
后端路由：后端处理URL和页面之间的映射关系
后端路由的缺点： 1. 整个页面都有后端来编写 2. 代码逻辑混乱 3. 前端开发需会PHP等技术
前后端分离阶段
Ajax的出现，产生了前后端分离的开发模式
后端只负责数据，不负责任何页面的展示内容
前端渲染：浏览器中大部分内容都是由前端js代码在浏览器中执行并最终渲染的
SPA 单页面富应用阶段
在前后端分离的基础上加了一层前端路由
前端路由：URL和页面之间的映射关系由前端处理，核心是改变URL但是页面不进行整体刷新
Vue Router
vue-router是Vue.js官方路由插件，适合用于构建单页面应用。
使用流程
安装vue-router
npm install vue-router导入路由对象，并通过
Vue.use()明确地安装路由功能创建路由实例，并传入路由映射配置
使用路由： 通过
<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