vue-router入门（2）—— 命名视图，重定向和别名，router.push()，router.replace(),router.go()

  关于vue-router的入门，个人感觉官网的东西写的有点乱，所以打算整理一些场景搭配使用。所以可能会漏掉一些个人觉得几乎用不到的功能。有兴趣的可以去官网看完整版。

1.命名视图

需求：首页的头部比较特殊，我们以颜色区分，首页可能需要用到一个绿色的header，其他页面的头部则用红色的header。我们通过命名视图（name），来设置不同的路由中用不同的header和main模板。

用命名视图实现：

 //header
 //内容区

//router文件夹下 index.js
import Vue from 'vue'
import Router from 'vue-router'
// 探究一下vue-router
import vueRouterPlay1 from '@/page/vueRouterPlay/vueRouterPlay1.vue'
import vueRouterPlay2 from '@/page/vueRouterPlay/vueRouterPlay2.vue'
import header1 from '@/page/vueRouterPlay/header1.vue'
import header2 from '@/page/vueRouterPlay/header2.vue'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/vueRouterPlay1',
      name: 'vueRouterPlay1',
      components: { // 注意这里是components 复数复数复数！
        'header': header1, //设置header模板
        'main': vueRouterPlay1 //设置main模板
      }
    },
    {
      path: '/vueRouterPlay2',
      name: 'vueRouterPlay2',
      components: { // 注意这里是components 复数复数复数！
        'header': header2,
        'main': vueRouterPlay2
      }
    }
  ]
})

结果如下：

2.重定向和别名

  重定向和别名的使用场景其实差不多，你希望用户在访问/index.htm,/index.html,/index的时候展示的都是首页，算是提升了用户操作的容错率，两者的唯一区别就是，是否修改url。

重定向

// 方式一：字符串路径path
{ path: '/a', redirect: '/b' }
// 方式二：name
{ path: '/a', redirect: {name: 'b'} }
// 方式三：动态返回重定向目标
{ path: '/a', redirect: to => {
  /* 方法接收 目标路由 作为参数；return 重定向的 字符串路径/路径对象 */
}}

别名

“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么“别名”又是什么呢？

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

上面对应的路由配置为：

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

3.router.push()，router.repalce()，router.go()使用

  router对象提供了三个function用于跳转链接。

  router.push( ... ) =>跳转到某个子页面，并在history中添加一条记录

  router.repalce( ... ) =>替换当前的页面，其实也可以理解为跳转，和push的区别就是不会在history中添加记录

  router.go(number) =>刚才提到的history，在go()中被使用，跳转到上一页就go(-1)，跳转到下一页就go(1)，当然实现跳转的前提都是history中有记录。

router.push(location, onComplete?, onAbort?)

声明式	编程式
	router.push(...)

// 方式一：字符串路径
router.push('/user')
// 方式二：path对象
router.push({ path: '/user' })
// 方式三：路由名称
router.push({ name: 'user'})

注意：如果提供了 path，params 会被忽略，query不会！！

// 不生效
router.push({ path: '/user', params: { id: 1 }})
// params生效 /user/1
router.push({ name: 'user', params: { id: 1 }}) // 使用name方式
router.push({ path: `/user/1` }) // 直接在path上扩充
// query不受影响 /user?id=1
router.push({ path: '/user', query: { id: 1 }})

router.replace(location, onComplete?, onAbort?)

声明式	编程式
	router.replace(...)

跟router.push 很像，唯一的不同就是，它不会向 history 添加新记录！

router.go(n)

在 history 记录中向前或者后退多少步，类似 window.history.go(n)