尝鲜vue3.0- 看完就开干（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

url	active	exact active
/parent/1/child/2	✅	✅
/parent/1/child/3	X	X
/parent/1/	✅	X

---

提供可以在路由运作时增删路由记录的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代码地址

介绍到这里，有遗漏欢迎大家补充，喜欢的动手收藏点赞。