背景
连续后面的三篇文章：
- 尝鲜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.jsapp.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.0router.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.vueimport {useRouter,useRoute} from 'vue-router' //见上文介绍的vue-router目前的APIsetup(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代码地址
介绍到这里，有脱漏欢送大家补充，喜爱的入手珍藏点赞。