Vue学习（二）-----vue-router

2018-03-14

使用vue-router构建SPA

小插曲
在使用路由时发现，默认的链接中会出现/#/看起来很不舒服，后来查了一下发现，只需要将router换个模式就行了
如下：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

官网如是说：
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

命名路由

给每一个路由”起一个名字”

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

// 在渲染时 
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>  
// 或者
router.push({ name: 'user', params: { userId: 123 }})

嵌套路由

在VueRouter 的参数中使用 children 配置：父组件的是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套。
要注意，以 / 开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径。在使用器那套路由时候。子组件路由前面不要加 ‘/‘
1
2
3
4
5
6
7
8
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}

编程式导航

router.push()

router.push(location, onComplete?, onAbort?)
在vue实例中，可以采用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' }})

router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

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

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

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

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

命名视图

有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航）和 main（主内容）两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default
注意：
在使用命名视图的时候，注routes中的component要换成==components==

<router-view ></router-view>
<router-view  name="router1"></router-view>
<router-view  name="router2"></router-view>

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: 默认的组件名称,
        router1: 路由1的组件名称,
        router2: 路由2的组件名称
      }
    }
  ]
})

重定向和别名

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

实例

参考资料：

vue-router2官方文档