5、vue集成vue-router

1、参考资料

1.文档

2、实践

1.引入vue-router

2.代码

src/pages/User.vue

<template>
  <h1>User Pages {{ id }}</h1>
</template>

<script>
export default {
  name: 'User',
  props: {
    id: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>

</style>

src/router/index.js

/**
 * @description: 路由的配置
 * @author: SoOnPerson
 * @create: 2019-09-04
 **/
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入routes
import { defaultMap } from './router.config'
// 引入路由
Vue.use(VueRouter)
// HTML5 History 模式
export default new VueRouter({
  mode: 'history',
  routes: defaultMap
})

src/router/router.config.js

/**
 * @description: 路由
 * @author: SoOnPerson
 * @create: 2019-09-04
 **/
import User from '../pages/User'

export const defaultMap = [
  { path: '/user/:id', component: User, props: true },
  { path: '/user', component: User }
]

App.vue

<template>
  <a-locale-provider :locale="zhCN">
    <div id="app">
      <h1>{{ device }}</h1>
      <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/user">Go to User</router-link>
        <router-link to="/user/12345">Go to User12345</router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>
  </a-locale-provider>
</template>

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store/' // 引入vuex状态管理
import router from './router' // 引入router
import './core/demand-loading' // 引入按需加载的组件
Vue.config.productionTip = false

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

3.运行