vue3-vue-router创建静态路由和动态路由_静态路由和动态路由在createrouter下怎么配置

根据官网代码搭建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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

// view/home.vue
<template>
  <div class="home">这是首页首页</div>
</template>

// view/about
<template>
  <div class="home">这是详情页</div>
</template>
1
2
3
4
5
6
7
8
9

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")
1
2
3
4
5

3. vue页面应用组件

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