1小时学会Vue之VueRouter&Vuex 学习笔记
https://www.bilibili.com/video/BV1zF411R7cR/
开发工具推荐
vue-devtool 地址 https://devtools.vuejs.org/guide/installation.html
手动创建项目
插件 vetur
可以自动补全vue代码 vue按tab
一 router
vue应用是 单页应用
src\router\index.js
router mode有两种
1 history url里不带# 推荐 http://localhost:8080/about
2 hash url里带# http://localhost:8080/#/about
path 具体路径
name 名称
component 对应的组件名称
app.vue
router-link
router-view
1 基本路由使用
新建组件 videoView.vue
src\router\index.js 中添加
{
path: '/video',
name: 'video',
component: VideoView
}
app.vue 里添加 <router-link :to="{name:'video'}">视频信息</router-link>
2 动态路由
src\router\index.js 中
{
path: '/video/:id',
name: 'video',
component: VideoView,
props: true
}
video组件中：
<p>Id：{{ id }}</p> props: ['id']
app.vue中
<router-link to="/video/18">视频信息id</router-link> |
<router-link :to="{name:'video',params:{id:19}}">视频信息id</router-link>
3 嵌套路由
新建 video，VideoInfo1.vue，VideoInfo2.vue
import VideoInfo1 from '../views/video/VideoInfo1.vue'
import VideoInfo2 from '../views/video/VideoInfo2.vue'
{
path: '/video/:id',
name: 'video',
component: VideoView,
props: true,
children: [
{ path: 'info1', name: 'video-info1', component: VideoInfo1 },
{ path: 'info2', name: 'video-info2', component: VideoInfo2 }
]
}
<router-link to="info1">点赞</router-link> |
<router-link :to="{ name: 'video-info2', params: { id: 19 } }">收藏</router-link>
<router-view/>
编程式导航
也就是自动跳转
3秒后跳转到首页
created () {
setTimeout(() => {
this.$router.push({ name: '/'，query:{num:1} })
}, 3000)
}
接收参数
created () {
this.$route.query
}
导航守卫
每次路由触发前要执行的，例如进度条
router.beforeEach((to, from, next) => {
console.log('路由触发了')
next()
})
二 vuex
