大フロントエンド学習--手書きVue Router

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Homerouter-link> |
      <router-link to="/ablout">Aboutrouter-link>
    div>
    <router-view/>
  div>
template>

//     
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = new VueRouter({
  routes
})

export default router

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

Vue.config.productionTip = false

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

const routes = [
  {
    path: '/',
    name: 'Index',
    component: Index
  },
  {
    path: '/detail/:id',
    name: 'Detail',
    //   props，  URL         
    props: true,
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Detail.vue')
  }
]

<template>
  <div>
      Detail  
    
              ：{{ $route.params.id }}

    <br>

    
        props  ： {{ id }}
  div>
template>

<script>
export default {
  name: 'Detail',
  //         props 
  props: ['id']
}
script>

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '../components/Layout.vue'
import Login from '../views/Login.vue'
import Index from '../views/Index.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  //     
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '',
        name: 'index',
        component: Index
      },
      {
        path: 'detail/:id',
        name: 'detail',
        props: true,
        component: () => import('@/views/Detail.vue')
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

<template>
  <div>
    <div>
      <img width='80px' src='@/assets/logo.png'>
    div>
    <div>
      <router-view>router-view>
    div>
    <div>
      Footer
    div>
  div>
template>

<template>
  <div>
    <router-link to="/">  router-link>
    <button @click="replace"> replace button>
    <button @click="goDetail"> Detail button>
  div>
template>

<script>
export default {
  name: 'Index',
  methods: {
    replace () {
      this.$router.replace('/login')
    },
    goDetail () {
      this.$router.push({ name: 'Detail', params: { id: 1 } })
    }
  }
}
script>

<template>
  <div>
      Detail  

        ： {{ id }}

    <button @click="go"> go(-2) button>
  div>
template>

<script>
export default {
  name: 'Detail',
  //         props 
  props: ['id'],
  methods: {
    go () {
      this.$router.go(-2)
    }
  }
}
script>

const path = require('path')
//      history      
const history = require('connect-history-api-fallback')
//    express
const express = require('express')

const app = express()
//   ：     history       
app.use(history())
//           ，      ../web
app.use(express.static(path.join(__dirname, '../web')))

//      ，    3000
app.listen(3000, () => {
  console.log('     ，  ：3000')
})

#   
start nginx
#   
nginx -s reload
#   
nginx -s stop

http: {
	server: {
		location / {
			root html;
			index index.html index.htm;
			#     ，        
			try_files $uri $uri/ /index.html;
		}
	}
}

Vue.component('router-link', {
      props: {
        to: String
      },
      render (h) {
        return h('a', {
          attrs: {
            href: this.to
          },
          
        }, [this.$slots.default])
      },
      // template: ''
    })

module.exports = {
  //      Vue（     ）
  runtimeCompiler: true
}

let _Vue = null

export default class VueRouter {
  static install (Vue) {
    // 1.              
    if (VueRouter.install.installed) return
    VueRouter.install.installed = true
    // 2.  Vue           
    _Vue = Vue
    // 3.    Vue       router     Vue   
    //   
    _Vue.mixin({
      beforeCreate () {
        if (this.$options.router) {
          _Vue.prototype.$router = this.$options.router
          this.$options.router.init()
        }
      }
    })
  }

  constructor (options) {
    this.options = options
    this.routeMap = {}
    // _Vue.observable       
    this.data = _Vue.observable({
      current: '/'
    })
  }

  init () {
    this.createRoutMap()
    this.initComponents(_Vue)
    this.initEvent()
  }

  createRoutMap () {
    //          ，              ，   routeMap 
    this.options.routes.forEach(route => {
      this.routeMap[route.path] = route.component
    })
  }

  initComponents (Vue) {
    Vue.component('router-link', {
      props: {
        to: String
      },
      render (h) {
        return h('a', {
          attrs: {
            href: this.to
          },
          //   
          on: {
            click: this.clickHandler
          }
        }, [this.$slots.default])
      },
      methods: {
        clickHandler (e) {
          history.pushState({}, '', this.to)
          this.$router.data.current = this.to
          e.preventDefault()
        }
      }
      // template: ''
    })
    const self = this
    Vue.component('router-view', {
      render (h) {
        const component = self.routeMap[self.data.current]
        return h(component)
      }
    })
  }

  initEvent () {
    window.addEventListener('popstate', () => {
      this.data.current = window.location.pathname
    })
  }
}

// ....

import VueRouter from '../vuerouter'

// ....