router从入门到入门

动态路由匹配：

 // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }

/user/foo 和 /user/bar 都将映射到相同的路由。
所以他们的id分别表示foo，bar
对应的：
this.$route.params.id=foo;

this.$route.params.id=bar;

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。

监控路由的变化的方法：

1、可以在watch里监测变化

  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }

2、加入导航守卫：beforeRouteUpdate

beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }

匹配任意路径
就在path后面加一个*号；

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分：打印出来的就是代替*的部分

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

编程式导航：可以不用通过<router-link>来跳转；

1、 router.push:

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

push(规则)，push括号里的规则同样可以写在to的属性；
其中，当push地址属性为name时候，不能传递query的参数；
params与query的区别：

1. 在地址路径上，params会显示在后缀；
2. query不会把参数显示在后缀；

2、router.replace

replace
类型: boolean
默认值: false
设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。
<router-link :to="{ path: '/abc'}" replace></router-link>

白话文就是：

<router-link :to="{ path: '/a'}" replace>a</router-link>
<router-link :to="{ path: '/b'}" replace>b</router-link>
<router-link :to="{ path: '/c'}" replace>c</router-link>

依次点击a,b,c页面以后，我从c页面点击浏览器的返回按钮，它不会回到b页面去；
反之使用push，它可以依次回到b，a页面去；

3、router.go

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

命名视图

页面显示的时候，组件会放在对应的name来显示；

重定向和别名：

重定向：

 { path: '/a', redirect: '/b' }
  
 { path: '/a', redirect: { name: 'foo' }}

 { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}

• “重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，
• /a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

别名：

  { path: '/a', component: A, alias: '/b' }

导航守卫：

类似路由的生命周期。

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

next规则：一定要调用next（）这个方法；

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。

next(false): 中断当前的导航。 URL 地址会重置到 from 路由对应的地址。

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

next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

1、全局前置守卫：

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

2、全局后置守卫

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

在路由配置里添加

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

组件内的守卫

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

其他API：

1、append

类型: boolean
默认值: false
设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b
<router-link :to="{ path: 'b'}" append>newRoute</router-link>

白话文就是:
原来的路径是：/oldRoute，点击了newRoute以后，页面上的路径会变成/oldRoute/newRoute
反之，不加属性，默认跳转的路径是：/newRoute

2、tag

tag
类型: string
默认值: "a"
有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。
<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

白话文就是：
不管你tag设置为什么，在html页面上会被渲染成那个标签，并且你点击它，它还是能成功跳转到新的页面；
反之，不设置，就是默认的a标签；

3、active-class

active-class
类型: string
默认值: "router-link-active" 
设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

白话文就是：

<router-link :to="'/index'" tag="li" active-class="be-red">首页</router-link>
<router-link :to="'/setting'" tag="li" active-class="be-red">设置</router-link>

//样式
.be-red{
    color: red;
}

点击设置会跳转到/setting路径，文字变红；

点击首页时候，会跳转到/index路径，并且首页文字会变红