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