vue vue-router

npm install vue-router

(或者指定版本号npm i vue-router@3.5.2 -S)

App.vue

<template>
  <div id="app">
    <!--<img alt="Vue logo" src="./assets/logo.png">-->
    <!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <h1>Hello App!</h1>
    <p>
      <!--使用 router-link 组件进行导航 -->
      <!--通过传递 `to` 来指定链接 -->
      <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
      <router-link to="/demoGsix">Go to demoGsix</router-link>
      <router-link to="/firstTest">Go to next</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

src-router-index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import demoGsix from '@/views/demoGsix.vue'
const routes =[
    {
        path: '/demoGsix',
        name: 'demoGsix',
        // component: () => import('@/views/demoGsix.vue')
        component:demoGsix
    },
    {
        path: '/firstTest',
        name: 'firstTest',
        component: () => import('@/views/FirstTest.vue')
    },
]
const router = new VueRouter({
    routes
})

export default router

main.js

import Vue from 'vue'
import App from './App.vue'
//导入路由模块
import router from '@/router/index.js'

Vue.config.productionTip = false

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

学习：vue2---路由（router以及vue-router）_星月前端的博客-CSDN博客_vue2获取路由