Vue3 Router路由单页面跳转简单应用

去官网学习→介绍 | Vue Router

cd 到项目 安装 Router ： cnpm install --save vue-router

或着 创建项目时勾选Router         vue create vue-demo

 to invert selection, and  to proceed)
 (*) Babel
 ( ) TypeScript
 (*) Progressive Web App (PWA) Support
>(*) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

运行示例：

代码：index.js

// import { createRouter, createWebHashHistory } from 'vue-router'

import { createRouter, createWebHistory } from 'vue-router'

//主页资源
import HomeView from '../views/HomeView.vue'

//页面资源
const routes = [
  {
     //一级导航  首页
    path: '/',
    name: 'home',
    component: HomeView
   
  },
  {
    //一级导航  关于
    path: '/about',
    name: 'about',

   //重定向 默认跳转到info
   redirect:"/about/info/重定向默认数据",

   //异步加载资源 
    component: () => import('../views/AboutView.vue'),

     //二级导航 
     children:[
      {
        //传递数据   /:name    key   about/us/数据
        path:"us/:name",
        // 跳转的资源视图
         component: () => import('../views/AboutUs.vue'),
      },
      {
        // 传递数据   /:cont    key   about/info/数据
        path:"info/:cont",
         component: () => import('../views/AboutInfo.vue'),
      }
    ]
  }


]

const router = createRouter({
  /**createWebHashHistory()
   * http://127.0.0.1:8080/#/
   * http://127.0.0.1:8080/#/about
   * 
   * createWebHistory()
   * http://127.0.0.1:8080
   * http://127.0.0.1:8080/about
   * 
   */
  history: createWebHistory(),
  routes
})

//导出 router 在main.js 中引用
export default router

代码：AboutInfo.vue

代码：AboutUs.vue

代码：AboutView.vue

代码：HomeView.vue

代码：App.vue

代码：main.js

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
//引入
import router from './router'

//.use(router)
createApp(App).use(router).mount('#app')