一: VueRouter
1. 配置项
在 VueRouter 中的index.js
中
const router = new VueRouter({
//mode默认值hash,区别在于切换页面的路径
mode: 'history',
base: process.env.BASE_URL,
// 具体路由的配置
routes
})
const routes = [
{
path: '/',
name: 'home',
// 当前路由切换以后要显示哪个组件
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
// 也可以通过这种方式加载组件
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
2. 具体路由的切换
通过router-link
中的 to 里面的路径,以便于修改当前的一个路由地址,达到切换组件的效果
router-view
表示切换后的组件要显示在哪
<template>
<div id="app">
<nav>
<!-- 除了可以用to还可以使用:to"{'name'}" 绑定的方式-->
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link :to="{ name:'about'}">About</router-link>
</nav>
<router-view/>
</div>
</template>
3. 自定义组件注册路由
首先在 view 下创建一个组件 VideoView.vue
<template>
<H1>视频信息</H1>
</template>
<script>
export default {
name: 'VideoView'
}
</script>
<style>
</style>
import 组件 , 在 routes 里面注册路由
最后在 App.vue 里添加对应的
router-link
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import VideoView from '../views/VideoView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
{
path: '/video',
name: 'video',
component: VideoView
}
]
4. 动态路由
如果想要匹配到 video 下的任何视频,就需要动态路由
在 routes 中加入 props
{
path: '/video/:id',
name: 'video',
component: VideoView,
props: true
}
然后在对应的组件中也加入 props
<template>
<div class="video">
<h1>视频信息</h1>
<p>视频id:{{ id }}</p>
</div>
</template>
<script>
export default {
name: 'VideoView',
props: ['id']
}
</script>
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<!-- 通过 params 增加参数 -->
<router-link :to="{ name:'video',params: { id: 29 }}">Video</router-link>
</nav>
<router-view/>
</div>
</template>
5. 嵌套路由
比如说对应某个视频有一下子功能,比如说:点赞,投币,收藏,弹幕,评论
通过
children
创建子功能
import VideoInfo1 from '../views/video/VideoInfo1.vue'
import VideoInfo2 from '../views/video/VideoInfo2.vue'
{
path: '/video/:id',
name: 'video',
component: VideoView,
children: [
{ path: 'info1', name: 'video-info1', component: VideoInfo1 },
{ path: 'info2', name: 'video-info2', component: VideoInfo2 }
],
props: true
}
定义二级组件的功能
<template>
<div class="video-info">
<h3>二级组件,点赞情况</h3>
</div>
</template>
<script>
export default {
name: 'VideoInfo2'
}
</script>
<style>
</style>
访问的路径为 :
localhost:8080/video/29/info2
localhost:8080/video/29/info1
6. 编程式导航
用户不需要点击跳转,通过$router.push
自动跳转
export default {
name: 'VideoInfo1',
// 三秒后自动跳转到home
created () {
setTimeout(() => {
this.$router.push({ name: 'home' })
}, 3000)
}
}
还有$router.replace
等方法
7. 导航守卫
比如说要在某个页面或者所有页面增加一个进度条
// 在router中index.js定义
router.beforeEach((to, from, next) => {
console.log('路由触发')
next()
})
前置守卫可以用来判断检测用户是或否登录再判断是否能点击
二: Vuex
统一的数据存储方式
export default new Vuex.Store({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
1. state 的使用
将数据存入 state
export default new Vuex.Store({
// 存数据在全局,其他组件都可以访问
state () {
return {
loginStatus: '用户已登录'
}
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
取出数据
<script>
export default {
name: 'VideoInfo1',
created () {
console.log(this.$store.state.loginStatus)
}
}
</script>
2. mutations 的使用
mutations 相当于 methods,可以全局的对某个数据修改
不建议在组件里对某个数据进行修改 , 不利于数据的维护
定义函数
export default new Vuex.Store({
// 存数据在全局,其他组件都可以访问
state () {
return {
loginStatus: '用户已登录',
count: 0
}
},
getters: {
},
mutations: {
changeCount (state, num) {
state.count += num
console.log('count + ', num, '结果为:', state.count)
}
},
actions: {
},
modules: {
}
})
在其他组件中之心执行
mutations 中定义的方法必须通过commit 的方式提交
<script>
export default {
name: 'VideoInfo1',
created () {
console.log(this.$store.state.loginStatus)
this.handler()
},
methods: {
handler () {
this.$store.commit('changeCount', 1)
this.$store.commit('changeCount', 1)
}
}
}
</script>
3. actions 的使用
异步
在 actions 中定义一个函数
export default new Vuex.Store({
// 存数据在全局,其他组件都可以访问
state () {
return {
loginStatus: '用户已登录',
count: 0
}
},
getters: {
},
mutations: {
changeCount (state, num) {
state.count += num
console.log('count + ', num, '结果为:', state.count)
}
},
actions: {
delayCahngeCount (store, num) {
setTimeout(() => {
store.commit('changeCount', num)
}, 3000)
}
},
modules: {
}
})
在组件中执行
this.$store.dispatch
<script>
export default {
name: 'VideoInfo1',
created () {
console.log(this.$store.state.loginStatus)
this.handler()
},
methods: {
handler () {
this.$store.commit('changeCount', 1)
this.$store.dispatch('delayChangeCount', 10)
this.$store.commit('changeCount', 1)
}
}
}
</script>
和 actions 同步执行不同的是 mutations 定义的函数在执行的时候,是先等同步的函数执行完之后再执行异步函数
4. getters 的使用
相当于计算属性,具有缓存性
定义
len(state)
获取 loginStatus 的长度
|export default new Vuex.Store({
// 存数据在全局,其他组件都可以访问
state () {
return {
loginStatus: '用户已登录',
count: 0
}
},
getters: {
len (state) {
console.log('len()执行了')
return state.loginStatus.length
}
},
mutations: {
},
actions: {
},
modules: {
}
})
通过
this.$store.getters.len
<script>
export default {
name: 'VideoInfo1',
created () {
console.log(this.$store.state.loginStatus)
this.handler()
},
methods: {
handler () {
console.log(this.$store.getters.len)
console.log(this.$store.getters.len)
console.log(this.$store.getters.len)
console.log(this.$store.getters.len)
console.log(this.$store.getters.len)
}
}
}
</script>
5. modules
不同的功能需要有不同的全局处理,就可以使用 modules 分模块
modules: {
a: {
state,
mutations
...
},
b: {
...
}
}
评论区