VUE普通路由和带参数路由设置

一：安装router 添加conponent组件

创建一个路由文件router.js

import { createRouter, createWebHistory } from "vue-router";
import HomePage from "./components/HomePage.vue";
import AboutPage from "./components/AboutPage.vue";
import UserHome from './components/User/UserHome.vue';
import UserId from "./components/User/UserId.vue"
import UserName from "./components/User/UserName.vue"

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
    //无参数后面不带：id，这个是有参数
      path: "/home/:id",
      component: HomePage,

    
    },
    {
      path: "/about/:id",
      component: AboutPage,
    }
  ],
});

将路由文件导入main.js，文件才会生效

import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'

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

App.vue代码

<template>
<div>
//使用router-link to链接路由
  <router-link to="/home/123">HomePage</router-link><br>
  <router-link to="/about/123">123Aboutpage</router-link><br>
  <router-link to="/about/1234">1234Aboutpage</router-link><br>
  <router-view></router-view>
</div>

</template>

//可以在组件中获取路由参数{{$.route.params.id}}
<template>
    <div>
        HomePage,My id is{{$route.params.id}}
    </div>
</template>

一个简单带参路由完成