回头看 vue-router 复习

2018-04-01 本文已影响65人急眼的蜗牛

回头看 vue-router 复习

我的github iSAM2016


    const router = new VueRouter({
      routes: [
        { path: '/user/:id', component: User,
          children: [
            // UserHome will be rendered inside User's <router-view>
            // when /user/:id is matched
            { path: '', component: UserHome },
                    
            // UserProfile will be rendered inside User's <router-view>
            // when /user/:id/profile is matched
            { path: 'profile', component: UserProfile },
    
            // UserPosts will be rendered inside User's <router-view>
            // when /user/:id/posts is matched
            { path: 'posts', component: UserPosts }
          ]
        }
      ]
    })

<h2 id="navigation">函数式导航</h2>
注意 this.$route 和 this.router在使用上是有区别的

this.$router.push()

    调用的方法
    // 字符串
    this.$router.push('home')
    
    // 对象
    this.$router.push({ path: 'home' })
    
    // 命名的路由
    this.$router.push({ name: 'user', params: { userId: 123 }})
    
    // 带查询参数，变成 /register?plan=private
    this.$router.push({ path: 'register', query: { plan: 'private' }})

this.$router.go(n)

意思是在 history 记录中向前或者后退多少步

<h2 id="named">路由的命名</h2>

可以为路由设置，别名方便使用。如设置name, isshow

    const router = new VueRouter({
      routes: [
        {
          path: '/user/:userId',
          name: 'user',
          isShow: false
          component: User
        }
      ]
    })

<h5 id="namedexample">路由的命名:示例</h5>
切换路由的时候可以修改页面的标题

router.afterEach(transition => {
    document.title = transition.name
})

导航钩子

const router = new VueRouter({ ... })

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

主要用来拦截导航，让他完成跳转或取消。
参数：
to :Route: 标识即将进入的目标路由对象
from: Route 当前导航正要离开的路由
next: function 调用该方法来resolve 钩子，它的参数：

next(): 进行管道中的下一个钩子
next(false): 中断当前的导航
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

<h6 id="globalHooksExample">实例：检测用户登录</h6>
全局的钩子主要用来是，判断用户是否登录

router.beforeEach((to, from, next) => {
  //页面滚动到顶部
  window.scroll(0, 0);
  //用户没有登录了，并且还想访问别的页面，强制跳转login页
  if (!auth.login() && to.path !== '/login') {
      next('login');
    } else {
      //用户已经登录了，不在让用户访问login页
      if (auth.login() && to.path === '/login') {
          next({
            path: '/demo/user/list'
          });
      } else {
        next();
      }
    }
})

某个路由独享的钩子（VIP组件）

 const router = new VueRouter({
  routes: [
    path: '/foo',
    component: Foo,
    beforeEach: (to, from, next) => {

    }  
  ]
})

<h2 id="mate">路由元信息</h2>

较难理解

我们称呼routers 配置中的每个路由对象为路由记录。路由记录可以是嵌套的。比如
http://localhost:3000/#/demo/user/list
这个地址中可以说明路由记录有三个，分别是：

/demo
/demo/use
/demo/use/list

image

一个路由匹配到的多有路由记录暴露在$route对象当中的$route.matched 数组当中，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

示例

<h2 id="routeObject">路由对象信息</h2>
对象出现的地方，注意是route 没有r结尾

route Object出现的地方
router.match(location)
this.$route
全局钩子

对象的属性就不书写了见路由信息对象的属性

<h2 id="Router">Router 实例</h2>
Router注意是 有r结尾
Router 实例属性

<h2 id="options">$router.options</h2>
在$router 中有个鬼是$router.options 官网没有找到，说明。
这个属性包含了路由的树形结构，可以借助这个来实现menu层级的划分

image

回头看 vue-router 复习