router

import Vue from 'vue' // 引入vue
import VueRouter from 'vue-router' // 引入router
import App from './App.vue' // 引入依赖页

// 路由懒加载：结合vue的异步组件和weebpack的代码分割功能
const home = () => import(/* webpackChunkName: "Home" */ '@/components/home.vue')
const my = () => import(/* webpackChunkName: "my" */ '@/components/component.vue')

// 定义路由
const routes = [
  {
    path: '/',
    name: 'home', // 命名路由
    redirect: 'home', // 重定向
    component: home, // 路由映射的组件
    meta: { // 路由元信息
      show: true
    },
    children: [
      {
        path: '/my',
        name: 'my',
        component: my,
        meta: {
          name: 'xiaoming'
        }
      }
    ]
  }
]

// 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  mode: 'history', // 默认模式hash 
  routes
})

// 创建和挂载根实例：通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

// 编程式导航
// path优先于name
// query和params读取语法：this.$route.query.userId
// query和params不同之处：页面刷新后url中的param丢失
// param只能配合name使用，query两者都可以
this.$router.push({ path: 'home',query: { userId: '123'}})
this.$router.push({ name: 'user', params: { userId: '123' }})
// 不记录在history中
this.$router.replace({ name: 'user', params: { userId: '123' }})