理解Vue.js及其路由管理插件VueRouter
Vue.js？那可是个简捷快速，专攻用户界面开发的JavaScript框架。有了它，网页设计变得轻松有趣！还有好多实用小工具，帮你更高效地完成前端编程。VueRouter，更是神器般的存在！有了它，咱就能轻松做出单页应用（SPA），还能随意在客户端控制路由。页面切换，简直跟换衣服一样容易。想让用户体验更好吗？那就用路由设置来决定显示哪些内容！
小白常踩坑：“xxx不是一个注册过的路线。”
碰到”xxx未注册成为路由”咋整，不怕哦～这应该就是我们设路由器路径或跳转时候手滑出错了。没事儿，咱们一起找找原因，解决问题算了~
1.检查路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
别慌张！当然遇到这种“xxx不是已注册路由”的状况。你应该用Vue.use()把vuerouter装到主文件里面，还要给每条路由起个名儿、告诉它去哪里、用哪个组件等等。接下来，就要赶紧看看路由配置那里有没有一个叫做“xxx”的选项。如果没有找到的话，那么你就要开始检查问题！
记住，设路由器时要看好每个路线不要重复或相交，名字记得跟实际对上号。别把自己绕晕了，不然找不到之前注册的路由就麻烦！
听说过没？VueRouter不只是搞路径匹配，还有高级点的动态路由和嵌套路由！用它们要注意route间的关联和参数传递啥的哟。
2.检查导航链接
嘿亲，你老是遇到那种”xxx不是注册过的路线”的提示，大概率就是导航链接搞错了！在Vue这里，导航链接是靠组件实现的，每条链接都对应着专属的路由路径哟。下次再遇到这样的问题，记得检查下to属性对不对哈~
关于我们
链接里的to值得跟咱们路由路径完全对上号，包括小斜扛神马的都别搞错。否则，VueRouter就找不到我们设定好的路由，那就糟！
记住，我们在做项目时，有时候得生成动态连接。别忘了查看一下它们是不是真的可用和正确
3.检查路由跳转逻辑
除了前边说的那俩问题外，咱这儿的路由器跳转规则也有可能出了岔子。你了解不？其实在VueRouter里头，我们可以用编程式导航进行网页切换。遇到这种情况，别忘了查查你要跳转的那个路径是不是真的存着！
记住，VueRouter里有个叫“命名路由”的功能，可以给你每条路径安个名字。要想用这个名字进行链接，那可别忘了和注册时设定的一致~不然由于系统无法找到相应的路径，可能会引发一些问题！
哦对了，敲代码时要小心处理好异步问题，不然容易出错，像网页跳转出问题之类的。
{
path: '/about',
name: 'about',
component: About
}
结语
当碰到’xxx未注册为路由’提示时，不要慌张。首先确认下你的路由设置对不对，链接有没有拼错，逻辑是否顺畅。只要这些都没问题，应用就可以跑起来，达到你想要的效果！
看完这篇文章后，你会发现用Vue.js和VueRouter都不是问题了。就算是那个啥“xxx未注册路径”之类的小插曲也能搞定。记住多试试、多想一想就能提高！
评论0