admin管理员组文章数量:1634414
1.安装
官网链接https://router.vuejs/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>
效果
本文标签: 路由
版权声明:本文标题:vue3中使用路由 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1729176085a1188733.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论