vue3使用路由

官网地址

Getting Started | Vue Router

一、安装路由

cnpm install vue-router@4

二、新j建/src/router/index.js

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

const routes = [

  { path: '/', component: () => import ('../components/HelloWorld.vue') },

  { path: '/User', component: () => import ('../components/User.vue') },

]

const router = createRouter({

  history: createWebHashHistory(),

  routes, // short for `routes: routes`

})

 

export default router

三、main.js

import { createApp } from 'vue'

import App from './App.vue'

import './index.css'

import router from './routur'

 

const app = createApp(App)

// 使用路由

app.use(router)

app.mount('#app')

四、app.vue使用路由即可基本使用路由

<template>

  <div>

    <!-- <User :names="name"  :ages="age" class="aaa"  />

    <provides /> -->

   

    <router-view></router-view>

  </div>

</template>

 五、路由传参，如需限制传的参数必须是数字则需要加(\\d+)不需要则删除如需传多个参数则在后面加和+，，+必须有一个*可有可没有也可以多个

index.js

  { path: '/routerData/:id(\\d+)+', component: () => import ('../components/routerData.vue') },

跳转时传多个参数

      <router-link :to="{path: 'routerData/'+count+'/'+counts}">to/routerData</router-link>

定义的参数

 count: '1',

      counts: '2',

即可跳到想要去的页面

 如不加参数，则去404页面，新增404页面，如后面没参数就去404页面，

注意后面的参数由于是字符串哪怕是null等等都可以正常跳转

  { path: '/:path(.*)', component: () => import ('../components/NotFound.vue') },