vue从入门到进阶：vue-router路由功能（九）

<script src="https://unpkg.com/vue/dist/vue.js"></script>
="https://unpkg.com/vue-router/dist/vue-router.js">

div id="app">
  h1>Hello App!</p>
    <!-- 使用 router-link 组件来导航. -->
     通过传入 `to` 属性指定链接.  <router-link> 默认会被渲染成一个 `<a>` 标签 router-link to="/foo">Go to Foorouter-link="/bar">Go to Bar 路由出口 -->
   路由匹配到的组件将渲染在这里 router-viewdiv>

// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

 2. 定义路由 每个路由应该映射一个组件。 其中"component" 可以是 通过 Vue.extend() 创建的组件构造器， 或者，只是一个组件配置对象。 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo',component: Foo },{ path: '/bar' 3. 创建 router 实例，然后传 `routes` 配置 你还可以传别的配置参数,不过先这么简单着吧。
const router = new VueRouter({
  routes  （缩写）相当于 routes: routes
})

 4. 创建和挂载根实例。 记得要通过 router 配置参数注入路由， 从而让整个应用都有路由功能
const app =  Vue({
  router
}).$mount('#app')

 现在，应用已经启动了！

export default {
  computed: {
    username () {
       我们很快就会看到 `params` 是什么
      return this.$route.params.username
    }
  },methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    }
  }
}

const router =  VueRouter({
  routes: [
    {
      path: '/user/:userId'

:to="{ name: 'user',params: { userId: 123 }}">User>

router.push({ name: 'user',params: { userId: 123 }})

const router =  VueRouter({
  routes: [
    { path: '/a',redirect: '/b' }
  ]
})

const router =  }}
  ]
})

const router =  {
       方法接收 目标路由 作为参数
       return 重定向的 字符串路径/路径对象
    }}
  ]
})

const router =  }
  ]
})

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router =  VueRouter({
  routes: [
    { path: '/user/:id'
const User = {
  props: ['id'],template: '<div>User {{ id }}</div>' VueRouter({
  routes: [
    { path: '/user/:id',component: User,props: true }, 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id': User,sidebar: Sidebar },props: { default: true,sidebar: false }
    }
  ]
})

const router =  VueRouter({
  mode: 'history'
const router = 

const router =  VueRouter({
  routes: [
    {
      path: '/foo' a meta field
          meta: { requiresAuth:  }
        }
      ]
    }
  ]
})

<transition>
  <router-view></router-view>
</transition>

const Foo = {
  template: `
    <transition name="slide">
      <div class="foo">...</div>
    </transition>
  `
}

const Bar = {
  template: `
    <transition name="fade">
      <div class="bar">...</div>
    </transition>
  `
}

<router-link class="uilink" :to="{name:'orgList'}" active-class="active">成员</router-link>

const router =  当 /user/:id/profile 匹配成功，
           UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile' 当 /user/:id/posts 匹配成功
           UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts'
 字符串
router.push('home' 对象
router.push({ path: 'home' })

 命名的路由
router.push({ name: 'user',params: { userId: 123 }})

 带查询参数，变成 /register?plan=private
router.push({ path: 'register',query: { plan: 'private' }})

const userId = 123
router.push({ name: 'user',params: { userId }})  -> /user/123
router.push({ path: `/user/${userId}` })  -> /user/123 这里的 params 不生效
router.push({ path: '/user',1)"> -> /user

 在浏览器记录中前进一步，等同于 history.forward()
router.go(1 后退一步记录，等同于 history.back()
router.go(-1 前进 3 步记录
router.go(3 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

router-view class="view one"="view two" name="a"="view three"="b">

const router =  VueRouter({
  routes: [
    {
      path: '/': Foo,a: Bar,b: Baz
      }
    }
  ]
})

const router =  VueRouter({ ... })

router.beforeEach((to,from,next) => {
   ...
})

router.afterEach((to,from) => ...
})

const router =  {
         ...
      }
    }
  ]
})

const Foo = {
  template: `...`,beforeRouteEnter (to,next) {
     在渲染该组件的对应路由被 confirm 前调用
     不！能！获取组件实例 `this`
     因为当守卫执行前，组件实例还没被创建
  },beforeRouteUpdate (to,1)"> 在当前路由改变，但是该组件被复用时调用
     举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
     由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
     可以访问组件实例 `this`
 导航离开该组件的对应路由时调用
      }
}

<template>
  <div class="post">
    <div class="loading" v-if="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

export  {
  data () {
    return {
      loading: null
    }
  },created () {
     组件创建完后获取数据，
     此时 data 已经被 observed 了
    .fetchData()
  },watch: {
     如果路由有变化，会再次执行该方法
    '$route': 'fetchData'
  },methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
       replace getPost with your data fetching util / API wrapper
      getPost(this.$route.params.id,(err,post) =>false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

export  {
      post:  {
      next(vm => vm.setData(err,post))
    })
  },1)"> 路由改变前，组件就已经渲染完了
   逻辑稍稍不同
  beforeRouteUpdate (to,1)">
    getPost(to.params.id,1)">.setData(err,post)
      next()
    })
  },methods: {
    setData (err,post) {
       (err) {
         err.toString()
      }  post
      }
    }
  }
}

const router =  VueRouter({
  routes: [...],scrollBehavior (to,savedPosition) {
     return 期望滚动到哪个的位置
  }
})

scrollBehavior (to,savedPosition) {
  return { x: 0,y: 0 }
}

 (savedPosition) {
     savedPosition
  }  {
     }
  }
}

 (to.hash) {
     {
      selector: to.hash
    }
  }
}