vue2 — vue-router(1)

参考地址：https://router.vuejs.org/zh-cn/

• NPM安装vue-router

npm install vue-router (--save)

• 使用

// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入页面组件
import X from '../X'
import Y from '../Y'
import Z from '../Z'
Vue.use(VueRouter)  // 模块化时必须
export default new Router({
  mode: 'history',  // 设置H5模式，默认hash模式
  routes: [
    { path: '/x', component: X, name: 'x' },  // 无参
    { path: '/y/:id',   // 路径参数
      component: Y, 
      name: 'y', 
      children: [
        { path: 'z', component: Z, name: 'z' }
      ] 
    }  
  ]
})
// 根组件App.vue
<!-- 路由匹配到的组件将在这里渲染 -->
<router-view></router-view>
// 组件内a标签
<router-link to="/xx">将被渲染成a标签</router-link>
// 入口文件main.js
import router from './router';
const app = new Vue({
  router
})
app.$mount('#app')

• .router-link-active

// 当<router-link>对应的路由匹配成功时自动设置class属性值，默认值
// 修改通过路由的构造选项linkActiveClass全局配置
export default new Router({
    ...
    linkActiveClass: 'xxx',
    ...
})

• 编程式导航

// push向history添加新记录
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
// 替换掉当前的history记录
router.replace(...)
// 在history记录中前进或后退多少步，类似于window.history.go(n)
router.go(n)

• 重定向

{ path: '/a', redirect: '/b' }
{ path: '/a', redirect: to => {
    // 方法接受目标路由作为参数
    return 重定向的路径
    } 
}

• 别名

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