Vue Router入门

简单介绍

Vue Router是vuejs官方的路由管理器，利用vue-router，可以轻松构建单页应用

安装Vue Router

npm install --save vue-router

定义路由，创建router/index.js

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from './Home'
import Hello from './Hello'
Vue.use(VueRouter)

  const routes: Array<RouteConfig> = [
    {
      path: '/',          // 访问的路径
      component: Home     // 视图对应的组件
    }, 
    {
      path: 'hello',
      component: Hello
    }
]

const router = new VueRouter({
  routes
})

export default router

注册，在main.js中

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

此时，启动项目访问根路径，既能打开Home组件内容

router的两种使用方式

1: 使用 <router-link> 组件
<router-link to="/hello">打开Hello</router-link>

2: router-link组件默认会在页面生成一个a标签，点击会跳转到to属性对应的地址
<router-link :to="path">打开Hello</router-link>
<router-link :to="{path: '/hello'}">打开Hello</router-link>
<router-link :to="{name: 'Hello'}">打开Hello</router-link>

动态路由匹配，把某种模式匹配到的所有路由，全都映射到一个组件中

在User组件中，对于所有ID的用户，都使用User组件渲染
const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { 
    path: '/user/:id', 
    component: User 
    }
  ]
})

/user/foo 和 /user/bar 都会映射到对应的路由上

当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
更新User的模板，输出当前用户的ID

捕获所有路由或404 Not found路由

常规参数只会匹配被 / 分隔的URL片段中的字符，匹配任意路径，使用通配符 *

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

使用通配符路由时，确保路由的顺序，含有通配符的路由应该放在最后
路由 { path: '*' } 通常用于客户端404错误，意思是除了我设置的路由，其余的都算404

编程式导航，路由跳转还可以通过router的实例方法实现

在Vue实例中，可以通过 $router访问路由实例，可以调用 this.$router.push
点击 <router-link> 时，这个方法会在内部调用，点击 <router-link :to="..."> 等同于调用 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常用方法：push()，replace()，go()

router.push('/hello')
router.push({name: 'Hello'})
router.push({path: '/hello'})

router.replace('/hello')
router.replace({name: 'Hello'})
router.replace({path: '/hello'})

router.go(1) // 前进一步
router.go(-1) // 后退一步

push()和replace()使用方法基本一致
唯一区别在于push()是往历史记录栈后插入一条新的记录
而replace()是替换当前记录，不会改变历史记录栈长度
使用go()方法时，如果传入的参数，超出当前历史记录栈范围，则不会发生跳转

总结：路由实现了在单页面应用中，各个组件，各个页面之间的跳转导航