安装

介绍

使用模板引擎(vuejs)，我们实现了通过组合组件来组成应用程序。

使用路由引擎(vue-router)，实现把组件与路由联系起来。

使用

// 1.定义组件
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2.定义路由
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3.创建路由器(组件和路由握手)
const router = new VueRouter({
  routes // 缩写 routes: routes
})

// 4.挂载根实例(路由引擎和模板引擎握手)
const app = new Vue({
  router
}).$mount('#app')

参考

//定义路由-静态路由(一个路由对应一个组件)
{ path: '/foo', component: Foo }

//定义路由-动态路由(多个路由对应一个组件)
//(路径参数)
{ path: '/user/:id', component: User }

//定义路由-匿名路由
{ path: '/user/:id', component: User}
//定义路由-命名路由
{ path: '/user/:id', component: User,name: 'user' }

//定义路由-别名路由(多个路由对应一个组件)
 { path: '/a', component: A, alias: '/b' }
//定义路由-定向路由(多个路由对应一个组件)
//(重新定向)
{ path: '/a', redirect: '/b' }//字符
{ path: '/a', redirect: { name: 'foo' }}//对象
{ path: '/a', redirect: to=>{return '/b'}}//函数
{ path: '/a', redirect: to=>{return { name: 'foo' }}}
// 用户访问 /a时，URL将会被替换成 /b，然后匹配路由为 /b

//定义路由-嵌套路由(一个路由，多个视图，视图嵌套)
 { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
//定义路由-命名视图(一个路由，多个视图，视图同级)  
{
    path: '/',
    components: {
        //默认
        default: Foo,
        //视图名字a
        a: Bar,
        b: Baz
    }
}
//定义路由-嵌套视图
{
  path: '/settings',
  component: UserSettings,
  children: [
  //"/settings/emails"=>UserEmailsSubscriptions
  {
    path: 'emails',
    component: UserEmailsSubscriptions
  }, 
  //"/settings/profile"=>UserProfile
  {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
} 

//定义路由-数据路由(传递数据)
{
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
}

// 定义链接-声明式
<router-link :to="{name: 'user',params: {userId:123 }}">User</router-link>
// 定义链接-编程式
//方式2 router.push(location, onComplete?, onAbort?)
router.push({name:'user', params:{ userId: 123 }})

// 定义钩子-全局-前置
router.beforeEach((to,from, next)=> {
    // ...
    //进入下个钩子:next()
    //中断当前钩子:next(false)
    //跳转其他路由:next('/');//next({ path: '/' })
})
// 定义钩子-全局-后置
router.afterEach((to,from) =>{
    //...
})

// 定义钩子-路由-前置
{
    path: '/foo',
    component: Foo,
    beforeEnter: (to, from,next)=> {
    // ...
    }
}
// 定义钩子-组件-前置
{
    template: '<div>foo</div>'
    beforeRouteEnter: (to, from,next)=> {
    // ...
    }
}

// 访问路由-组件内
this.$route

// 定义视图-命名视图
<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>

访问路由器-组件内
this.$router

// 定义路由-获取数据
// 导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导
航。

// 定义组件-获取数据
// 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取
期间显示『加载中』之类的指示。