vue3中使用路由

1.安装

官网链接https://router.vuejs.org/installation.html#direct-download-cdn

npm install vue-router@4

2.创建文件夹

src\router\index.ts

// 1.导入
import { createRouter, createWebHashHistory } from 'vue-router'


const routes = [
    { path: '/', name: '', component: () => import('../components/Child.vue') },
    { path: '/Child2', component: () => import('../components/Child2.vue') },
]
const router = createRouter({
    history: createWebHashHistory(),
    routes, // short for `routes: routes
})



// 导出路由
export default router

3.引入main.ts

//程序的主入口文件,ts文件
//引入createApp函数,创建对应的应用,产生应用的实例对象
import { createApp } from 'vue'
//引入App组件(所有组件的父级组件)
import App from './App.vue'
// 引入路由
import router from './router'
//创建App应用返回对应的实例对象,调用mount方法进行挂载
const app = createApp(App)
// 使用路由
app.mount('#app')
app.use(router)

效果

4.动态路由带参,错误路由导错到404页

src\router\index.ts

// 1.导入
import { createRouter, createWebHashHistory } from 'vue-router'


const routes = [
    { path: '/news/:id', component: () => import('../components/News.vue') },
    { path: '/:path(.*)', component: () => import('../components/404.vue') },
]
const router = createRouter({
    history: createWebHashHistory(),
    routes, // short for `routes: routes
})



// 导出路由
export default router

效果

5.路由正则与重复参数

在id后面添加括号,正则校验参数值为数字,输错跳404

// 1.导入
import { createRouter, createWebHashHistory } from 'vue-router'


const routes = [
    { path: '/news/:id(\\d+)', component: () => import('../components/News.vue') },
    { path: '/:path(.*)', component: () => import('../components/404.vue') },
]
const router = createRouter({
    history: createWebHashHistory(),
    routes, // short for `routes: routes
})



// 导出路由
export default router

可重复参数

id后面加个+号

// 1.导入
import { createRouter, createWebHashHistory } from 'vue-router'


const routes = [
    { path: '/news/:id(\\d+)+', component: () => import('../components/News.vue') },
    { path: '/:path(.*)', component: () => import('../components/404.vue') },
]
const router = createRouter({
    history: createWebHashHistory(),
    routes, // short for `routes: routes
})



// 导出路由
export default router

效果

id后面加个*号,传或不传都可以

// 1.导入
import { createRouter, createWebHashHistory } from 'vue-router'


const routes = [
    { path: '/news/:id(\\d+)*', component: () => import('../components/News.vue') },
    { path: '/:path(.*)', component: () => import('../components/404.vue') },
]
const router = createRouter({
    history: createWebHashHistory(),
    routes, // short for `routes: routes
})



// 导出路由
export default router

6.嵌套路由

src\router\index.ts

// 1.导入
import { createRouter, createWebHashHistory } from 'vue-router'


const routes = [
    {
        path: '/news',
        children: [{
            path: 'child1',
            component: () => import('../components/Child1.vue')
        }, {
            path: 'child2',
            component: () => import('../components/Child2.vue')
        }],
        component: () => import('../components/News.vue')
    },
    { path: '/:path(.*)', component: () => import('../components/404.vue') },
]
const router = createRouter({
    history: createWebHashHistory(),
    routes, // short for `routes: routes
})



// 导出路由
export default router

src\components\News.vue

<template>
  <h4>新闻页嵌套路由</h4>
  <router-view />
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "C_hild",
  setup() {
    return;
  },
});
</script>

src\components\Child1.vue

<template>
  <h4>子路由1</h4>
  <router-view />
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "C_hild",
  setup() {
    return;
  },
});
</script>

src\components\Child2.vue

<template>
  <h4>子路由2</h4>
  <router-view />
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "C_hild",
  setup() {
    return;
  },
});
</script>

效果