简单理解Vue Router-简单理解t检验与秩和检验
2023-08-07 19:39:51
我们先学习三个英语单词：
route：单数，我们可以理解为单个路由或某一个路由。routes：复数，是一组路由，把上面的每一条路由组合起来，形成一个数组。router： 路由器，由它来管理路由。当用户在页面上点击按钮的时候，router就会去routes中去查询route什么是Vue Router？
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。https://router.vuejs.org/zh/router.vuejs.org/zh/
当然我们即使不使用Vue Router，也可以实现单页面间的跳转：Vue文档Demo
const NotFound = { template: <p>Page not found</p> }
const Home = { template: <p>home page</p> }
const About = { template: <p>about page</p> }
const routes = {
/: Home,
/about: About
}
new Vue({
el: #app,
data: {
currentRoute: window.location.pathname
},
computed: {
ViewComponent () {
return routes[this.currentRoute] || NotFound
}
},
render (h) { return h(this.ViewComponent) }
})
但是在复杂应用中，我们最好还是使用VueRouter来避免代码的臃肿。
VueRouter如何实现根据页面跳转的
vue拿到地址栏的路径（如/user/user-list）根据routes的配置，拿到components将<router-view/>替换成相应的components找不到的话会报错，当然一般都会配置404简单总结：
history模式和hash模式：
hsah : 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，URL 改变时，页面不会重新加载。( url 有 # ，不好看)history : 可选 history 模式，充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。( url 没有 # ，好看)访问路由：组件内通过this.$route访问当前路由；通过this.$router访问所有路由
导航守卫：
官方文档：导航”表示路由正在发生改变。正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。简单来说，导航守卫就是路由跳转过程中的一些钩子函数，路由跳转是一个大的过程，这个过程又包括前中后等不同阶段。每一个阶段中都有一个钩子函数，令你可以在这个阶段中进行某种操作（类似于Vue的生命周期钩子函数）。分为三类：
全局守卫：router.beforeEach、router.beforeResolve、router.afterEach路由独享的守卫：beforeEnter组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave我们以路由独享的守卫来简述用法：
const router = new VueRouter({
routes: [
{
path: /foo,
component: Foo,
beforeEnter: (to, from, next) => {
next( doSomething() )
}
}
]
})
路由懒加载
把不同路由对应的组件分割成不同的代码块，当某路由被访问的时候才加载其对应组件，以提高页面加载效率，减少首页加载时间。这个方法被称为路由懒加载。代码示例：
//原本写法：
import Vue from vue
import Router from vue-router
import Home from pages/home
...
Vue.use(Router)
export default new Router({
routes: [
{
path: /,
name: home,
component: Home
}
...
]
})
//路由懒加载：
import Vue from vue
import Router from vue-router
const Home = () => import(./home)// 只有这一行不同，就是改成函数（函数的作用之一就是可以令一串代码一段时间后执行）
...
Vue.use(Router)
export default new Router({
routes: [
{
path: /,
name: home,
component: Home
}
...
]
})
动态路由：不同的路径对应同一个视图。{path: *}匹配所有路由，通常匹配404页面。
重定向：访问a路径的时候跳转到b路径，从而显示b路径的视图：
{ path: /a, redirect: /b}
子路由：children
常见API：
$router.path：字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"$router.params：一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。 $router.query：一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。$route.hash：当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。以上就是关于《简单理解Vue Router-简单理解t检验与秩和检验》的全部内容，本文网址：https://www.7ca.cn/baike/60011.shtml，如对您有帮助可以分享给好友，谢谢。
声明