背景
连续后面的三篇文章：
- 尝鲜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代码地址
介绍到这里，有脱漏欢送大家补充，喜爱的入手珍藏点赞。
发表回复