vue3中使用路由
1.安装官网链接https://router.vuejs.org/installation.html#direct-download-cdnnpm install vue-router@42.创建文件夹src\router\index.ts// 1.导入import { createRouter, createWebHashHistory } from 'vue-router'const rout
·
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>
效果
更多推荐
已为社区贡献10条内容
所有评论(0)