初始化 vue 项目及路由配置

Vue Router 官方手册 https://router.vuejs.org/zh/guide/#html

webpack 初始化 vue 项目后，如何构建脚手架 https://blog.csdn.net/weixin_44371237/article/details/111592750

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <!-- 路由视图 -->
    <router-link to="/">Go to Index</router-link>
    <router-link to="/Hello">Go to Hello</router-link>
    <router-view />
  </div>
</template>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Hello',
      name: 'Hello',
      component: Hello
    }
  ]
})

components中新建Hello.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '你好，chenxb'
    }
  }
}
</script>