H5W3
当前位置:H5W3 > 其他技术问题 > 正文

重读Vue核心插件–routervuex

Router

根据你发送的url,请求回对应的组件,并寻找对应的router-view位置,进行组件的渲染

???router-view搜索路径的方式

工作简单过程

引入vuerouter组件、定义路由(也称配置路由)、创建router实例、全局挂载路由

在全局挂载后,我们就可以通过this.$router访问路由器

动态匹配路由

意义:对于同一组件,但是有着不同请求参数的请求,我们可定不能为每一参数都配置一个路由、一个组件,我们肯定要设置一个通用的路由,所以我们提出了动态路由匹配,解决了重复配置路由的问题

在配置router的js下这么配置path
const router = new VueRouter({
routes:[
{path:'/user/:id', component: User}
]
})
 

当然配置了统一的路由配置,我们还是要获取请求参数的,我们这是可以通过this.$route.params来获取参数,

嵌套路由

意义:因为我们页面是复杂的,在请求回组件中可能还嵌套着路由,为了解决这种多重路由嵌套问题,我们要配置多重路由

简单描述

就是在路由配置下多出一个children属性,而这个属性中的内容格式和正常的路由配置格式没有区别,就是渲染的位置发生了变化

这是最顶层出口
<div id="app">
<router-view></router-view>
</div>
这个是包含嵌套的路由
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
路由嵌套配置
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功,
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
 

对比—视图命名

提到路由嵌套我们就要想到视图命名

因为视图命名也是一个处理返回多个组件的操作,但是不同的是,这个操作是在一个界面上返回多个组件,由于一次返回多个组件,这就产生了顺序相关的问题,为了使组件和对应的出口完美对应,我们可以在每个出口进行命名操作,同时在路由配置时,也进行命名配置

<router-view name='a'></router-view>
返回组件
components: {
a:要返回的组件
}
 

编程式导航

意义:过去我们导航的方式都是通过router-link的方式写在template中,但是有时候我们在逻辑层面上控制路由的跳转是十分不方便的,所以我们同时需要一种方法,使我们可以在逻辑层面上完成导航的跳转

<router-link :to=""> 和router.push()的行为是一样的
因为我们可以通过this.$router的方式访问到路由实例
 

原理:都是向history栈中添加一条记录

路由命名

在路由中命名,可以起到和路径请求的一样的效果
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

路由重定向

const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
 

辨析重定向和别名:

重定向:地址被转移了

别名:几个地址名都是一样的,都指向同一地址

路由组件传参

History模式

hash模式

由于是用hash来模拟url,所以当url改变时候,并不会真正的刷新页面

history模式则相反,它是正常的url,需要服务器的配置支持,一旦得不到资源就会显示404页面

Vuex

为了集中管理所有组件的状态

单个组件的状态管理很简单的循环:数据->视图->事件触发->数据

但是当多个组件交换状态时,这种的简单的循环就容易被破坏

例如:当多个组件依赖同一组件的状态时,组件之间的通信会变得十分复杂

所以我们提出一个公共的存储仓库,这个仓库的特点就是响应式的

接下来介绍Store的组成:

state

数据存放的位置

store.state的方式可以获取数据,仅需在计算属性中返回即可

mutation

存放一些方法,用于对state数据操作的方法

store.commit('increament')可以触发increament的方式

本文地址:H5W3 » 重读Vue核心插件–routervuex

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址