关于javascript:尝鲜vue30-看完就开干4

背景

连续后面的三篇文章：

• 尝鲜 vue3.0- 从 ToDoList 开始（1）
• 尝鲜 vue3.0- 理解变动(2)
• 尝鲜 vue3.0-tyepscript 开发组件(3)

间隔正式开发还须要介绍一下路由变动，这样就算对 vue3.0 开发的以有了初步理解，以及实现我的项目的根底建设。

装置 vue-router

// 目前最新版本
npm i --save vue-router@4.0.0-beta.9
"vue-router": "^4.0.0-beta.9"

// 配置
import {createRouter, createWebHashHistory} from 'vue-router'

const router = createRouter({//createWebHistory() hostory 模式
  history: createWebHashHistory(),//hash 模式 
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    // 动静门路参数 以冒号结尾
    {path: '/home', component: () => import('../views/home.vue') },
  ],
})
export default router
// 应用 main.js
app.use(router)

scoped slot（作用域插槽）

• 删除 tag 属性（vue2.0 router 文档 tag 介绍）

本来是想要 <router-link> 渲染成某种标签, 然而应用起来会不够直观清晰

// 之前
//tag="button"  router-link 将会渲染成 button 标签
<router-link to="/" tag="button">
    <Icon>home</Icon><span class="xs-hidden">Home</span>
</router-link>
// 之后 应用 scoped slot 替换
<router-link to="/">
  <button role="link">
    <Icon>home</Icon><span class="xs-hidden">Home</span>
  </button>
</router-link>

• 删除 event属性（vue2.0 router 文档 event 介绍）
  默认是 ’click’, 申明能够用来触发导航的事件。能够是一个字符串或是一个蕴含字符串的数组。也被删除，用作用域插槽代替。
• 进行主动将点击事件调配给外部锚点
• 新增 scoped-slot API
• 增加 custom prop 以齐全自定义router-link 的渲染

• 简写形式（有坑）

  // 从第二篇的中央有介绍过 v -slot 有简写形式，然而这里值得注意，下方的写法在浏览器渲染却有不通
  <router-link to="/about" #custom="{href}">
     <a :href="href">1.{{href}}</a>
   </router-link>
   <router-link to="/about" v-slot:custom="{href}">
     <a :href="href">2.{{href}}</a>
   </router-link>
  
   <router-link to="/about" custom v-slot="{href}">
     <a :href="href">3.{{href}}</a>
   </router-link>

渲染之后的后果只有第三个失常显示

—
### vue-router 的 API

和 vue3.0 一样，api 全副走 import，不放在 this 外面（打印 require(‘vue-router’)）

meta 属性（给路由附加数据的属性）

{path: '/my', meta: { requiresAuth: true}}
// 之前
router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !auth.loggedIn()) next('/login')
  else next()})
// 倡议 3.0
router.beforeEach((to, from, next) => {if (to.matched.some(record => record.meta.requiresAuth))
  // ...do sth
})

router-link-active/router-link-exact-active class 类名

• 别名和子路由也将激活
• params 不统一不会被激活

假如以后路由/parent/1/child/2

提供能够在路由运作时增删路由记录的 API

//my.vue
import {useRouter,useRoute} from 'vue-router' // 见上文介绍的 vue-router 目前的 API
setup(props,ctx){console.log(useRouter(window.location.pathname));// 相似原来的 this.$router
   console.log(useRoute(window.location.pathname));// 相似原来的 this.$route
 }

// 路由记录的值
const routeRecord: RouteRecord = {
  path: '/new-route',
  name: 'NewRoute',
  component: NewRoute
}

router.addRoute(route: RouteRecord) // 新增一个路由记录
router.removeRoute(name: string | symbol) // 删除
router.hasRoute(name: string | symbol):// 判断是否存在
router.getRoutes(): RouteRecord[] // 获取记录列表

路由跳转

• 明确定义路由跳转失败，而后如何捕捉谬误
• 路由跳转将是 Promise 模式

• 将 router.push 与 router.afterEach，router.onError 保持一致

  router.push('/dashboard').then((failure) => {if (failure) {
      failure instanceof Error // true
      failure.type // NavigationFailure.canceled【aborted，canceled，duplicated】}
  }).catch(()=>{...})

同时应用 keep-alive 与 transition

// 以前
<transition :name="transitionName" >
  <keep-alive >
    <router-view></router-view>
    <router-view></router-view>
  </keep-alive>
</transition>
// 之后
<router-view v-slot="{Component}">
  <transition :name="transitionName" mode="out-in">
    <component :is="Component"></component>
  </transition>
</router-view>

滚动行为

不罕用，vue2.0 在官网上的介绍

// 改变不大，只是为了更加贴近原生, 将属性名对立了
{selector:..,x: 0, y: 200,behavior}
// becomes
{el:...,left: 0, top: 200,offset}

在激活某路由的时候减少逻辑判断，将路由视图显示其余内容（比方一些 loading 状态）

<router-view :route="routeWithModal"></router-view>
const App = {
  computed: {routeWithModal() {if (backgroundView) {return this.$router.resolve(backgroundView)
      } else {return this.$route}
    }
  }
}

路由守卫不必应用 next，也能够间接返回某个值或者是 Promise

// 之前
router.beforeEach((to, from, next) => {if (!isAuth) next(false)
  else next()})

// 当前能够
router.beforeEach(() => isAuth)

最初

装置理解完路由的相干变动，间接能够开干了。整个过程下来，vue3.0 的变动还是能够承受的，在向更好的方向倒退。举荐应用 vite 也很好，很多货色都内置，开箱即用。至于 typesciprt，只是 vue3.0 更好的反对了 ts 语法，然而用不必，怎么用还是看我的项目以及开发者自身。目前介绍 vue3.0 的应用，到此其实曾经能够开始写我的项目了。还有 Vue Composition API 没介绍，然而简略和罕用的 API 在下面曾经用过了，前期再更新。

github 代码地址

介绍到这里，有脱漏欢送大家补充，喜爱的入手珍藏点赞。