vue3-vue-router创建静态路由和动态路由

根据官网代码搭建router遇到了很多问题

1. html

是指用于HTML文件里的

javascript

卸载js文件里

Vue-cli项目中使用router

1. 创建router.js文件
   在router.js文件里创建路由， views文件加下面存放路由跳转的页面。
   遇到的一些语法问题： export 导出的属性import时需要用花括号， export default 不需要花括号, 如下方的createWebHistory放在花括号里才能用

// router/index
import {
    createWebHistory, createRouter } from "vue-router";
import Home from "../views/home.vue";
import About from "../views/about.vue";
import dynamicPage from "../views/dynamicHome.vue"

const routes = [
  {
   
    path: "/",
    name: "home",
    component: Home,
  },
  {
   
    path: "/about",
    name: "About",
    component: About,
  },
  {
   
    path: "/dynamicPage/:id",
    name: "dynamicPage",
    component: dynamicPage,
  },
];

const router = createRouter({
   
  history: createWebHistory(),
  routes,
});

export default router;

// view/home.vue


// view/about

2. main.ts文件创建app时安装路由插件
   这是vue3的用法，use安装插件时跟在createApp创建的实例后面

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"

createApp(App).use(router).mount("#app")

3. vue页面应用组件

// singleRouter
<template>
  <div class="single-router">
    <h3>路由跳转</h3