vue-router笔记1

$ cnpm install vue-router --save

vue的基本用法就是，分割成好多个组件，
每个组件有 data,template,methods,computed,等等， 还有 components
这些组件都需要挂载在 html上

根组件比较简单， 就是在 new Vue（{}）的时候，可以用el 字段绑定挂载，
或者生成实例后，new Vue({}).$mount("app") 来挂载

而其他组件则需要从根组件开始， 一个一个用标签的方式进行挂载，
（或者叫渲染？插入？）

然后就会出现一个树状结构，每个组件的最基本关系都是 父子关系。

父子关系的数据传递是靠 props 和 自定义事件， 以及slot来解决的。

为了方便非父子间组件的数据传递， 有了vue-x, store,state.

但是接触了vue-router之后发现，
挂载，或者渲染组件的时候，不一定要用父子间关系，
而是根据路由进行配置。

当然最后的挂载（渲染？，插入？），也是需要 这个标签来实现的。

但你发现，没有了父子关系之后，
他要怎么传递数据呢？
似乎是用url，除了url,和vue-x 还有别的方式吗？

还有一个问题是，既然组件可以用父子间关系来引入，也可以用router来引入，
那么什么时候用父子间比较好？，什么时候用router引入比较好？

以上作为对vue的一点感受， 外加带着疑问去学一下视频。

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)// 为了注入?

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

想成所有组件都要在routes进行注册?

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,//必须要在根实例上注入.
  components: { App },
  template: ''
})

App.vue

用a标签也可以跳转到相应的组件,
只要url相应的改变就可以

image.png

mode字段,

export default new Router({
   mode : "history",// 用的是html的history
  routes: [
   ...
  ]
})
home // 不刷新跳转
    about // 不刷新跳转
    home//刷新跳转
    about// 刷新跳转

......................
export default new Router({
   mode : "hash",// 默认就是哈希模式
  routes: [
   ...
  ]
})
home // 不刷新跳转
    about // 不刷新跳转
    home//不刷新跳转
    about//不刷新跳转

用bind语法

    home
    about

这样就不用写死了?

我们发现,这个路由是通过#,来实现的,
或者说是根据url来实现的

URL 的两种风格
RESTful : a/b/c/d
强调的是层次感?
非RESTful : ?key=value&key=value
强调的是数据?

动态路由匹配

App.vue

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'
import Room from '@/components/Room'
import Err from '@/components/Err'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/about/:di',
      name: 'About',
      component: About
    },
    {
      path: '/room/:id?',// 这里如果没有 ? 那 /room就不会渲染
      name: 'Room',
      component: Room
    },
    {
      path: '/err',
      name: 'Err',
      component: Err
    },
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '*',// 初级的导航守卫
      redirect (to) {
        if (to.path == "/abc") {
            return "/home"
        }else {
          return "/err"
        }
      }
    },
  ]
})

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

Room.vue

其他组件就是基本模板.