1小时学会Vue之VueRouter&Vuex 学习笔记

开发工具推荐

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