凡科网网站怎么设置会员登录板块,门户网站视频,江苏苏州网站建设,wordpress 好的插件文章目录 1、Vue3 嵌套路由2、项目结构3、编写相关页面代码3.1、编写route文件下 index.ts文件3.2、main.ts文件代码#xff1a;3.3、App.vue文件代码#xff1a;3.4、views文件夹下的Home文件夹下的index.vue文件代码#xff1a;3.5、views文件夹下的Home文件夹下的Tigerhh… 文章目录 1、Vue3 嵌套路由2、项目结构3、编写相关页面代码3.1、编写route文件下 index.ts文件3.2、main.ts文件代码3.3、App.vue文件代码3.4、views文件夹下的Home文件夹下的index.vue文件代码3.5、views文件夹下的Home文件夹下的Tigerhhzzb.vue文件代码3.6、views文件夹下的Home文件夹下的T.vue文件代码3.7、views文件夹下的Home文件夹下的ChildA.vue文件代码 4、测试效果 1、Vue3 嵌套路由
Vue3 嵌套路由的使用和 Vue2 相差不大主要的区别是 Vue3 的路由实例化使用了 createApp() 方法所以实例化路由时需要传入根组件。另外Vue3 的路由对象除了包含 Vue2 中的导航守卫、导航钩子和解析守卫等功能外还新增了 meta prop 和 route prop。
在使用嵌套路由时建议将路由按照功能模块进行分层每一层代表一个主要的功能块每个层级下的路由数量不要过多一般建议不要超过 10 个层级也不要超过 5 层。同时根据实际业务需求可以适当调整路由层级和数量以达到更好的管理和使用效果。
2、项目结构 3、编写相关页面代码
3.1、编写route文件下 index.ts文件
route文件下 index.ts文件代码
import { createRouter, createWebHistory, type RouteRecordRaw } from vue-router
import HomeView from ../views/HomeView.vueconst routes: RouteRecordRaw[] [{path: /,redirect: /home,},{path: /home,name: Homeindex,component: () import(../views/Home/index.vue),meta: {title: Home Page,roles: [admin, admin1]},children: [{path: tigerhhzz,name: Tigerhhzz,component: () import(/views/Home/Tigerhhzz.vue),// 也可以使用props传参方式接收传来的参数props: (propsRouter) {// console.log(props router, propsRouter)// 可以return query 也可以return params支持两种传参方式return propsRouter.query},// 多级嵌套 建议用query传参children: [{path: childA,name: ChildA,component: () import(/views/Home/ChildA.vue),},]},{path: tigerhhzzb/:id/:title, // 提前定义params参数可以定义多个name: Tigerhhzzb,component: () import(/views/Home/Tigerhhzzb.vue),},]},
]export const router createRouter({// 路由的history模式共有三种模式// createWebHistory、createWebHashHistory、createMemoryHistory// history: createWebHashHistory(),history: createWebHistory(),// 路由配置routes,// 是否严格匹配路由strict: true,// 路由跳转完成后页面滚动行为scrollBehavior: () ({ left: 0, top: 0 }),
})
3.2、main.ts文件代码
import ./assets/main.cssimport { createApp } from vue
import { createPinia } from piniaimport App from ./App.vue
import {router} from ./router/indexconst app createApp(App)app.use(createPinia())
app.use(router)app.mount(#app)
3.3、App.vue文件代码
scriptimport { defineComponent } from vue// vue3.0版本语法
export default defineComponent({name: App,
})/scripttemplateRouterView //templatestyle/style
3.4、views文件夹下的Home文件夹下的index.vue文件代码
templatediv classhomeh2首页{{ title }}/h2!-- 模拟有权限时显示 --div v-ifroles.includes(role)h2嵌套路由/h2router-link to/home/tigerhhzzpush跳转到/home/tigerhhzz页面/router-linkbr!-- 加了/就要写全 /home/lxb --router-link replace to/home/tigerhhzzb/id:2/title:102push跳转到/home/tigerhhzzb页面/router-linkrouter-view/router-view/div/div
/templatescript langts
import { defineComponent, reactive, onMounted, toRefs, } from vue
import { useRoute, useRouter } from vue-routerexport default defineComponent({name: Homeindex,setup() {const router useRouter()const route: any useRoute()const state reactive({title: ,role: , // 我的当前角色roles: [],routerGo: (path) {if (path lx) {// query传参可以用path 也可以用name: Lxrouter.push({path: path,query: {title: 101,id: 1}})// router.replace} else {// params传参只能用namerouter.replace({// path: path /id:2/title:102,name: Lxb,params: {title: 102,id: 2}})}},})onMounted(() {console.log(/home, route)state.title route.meta.titlestate.roles route.meta.roles// 模拟一个接口setTimeout(() {const res {code: 200,data: {token: 123456,userName: 吴彦祖,role: admin}}state.role res.data.role}, 0)})return {...toRefs(state)}}
})
/scriptstyle
.home {color: pink;font-size: 14px;
}
/style3.5、views文件夹下的Home文件夹下的Tigerhhzzb.vue文件代码
templatediv stylefont-size: 14px;h2我是练习b{{ route?.params?.title }}页面/h2divid:{{ route?.params?.id }}/divbutton clickrouterGoBack返回首页/button/div
/templatescript langts
import { defineComponent, onMounted, reactive, toRefs } from vue
import { useRoute, useRouter } from vue-router// vue3.0语法
export default defineComponent({name: Tigerhhzzb,setup() {const route useRoute()const router useRouter()const state: any reactive({routerGoBack: () {router.replace(/home)// 由replace跳转进来的不可以使用router.go(-1) 路由栈是空的》回不到上一个路由},})onMounted(() {console.log(route)})return {route,...toRefs(state)}},
})
/script3.6、views文件夹下的Home文件夹下的T.vue文件代码
templatediv stylefont-size: 14px;h2我是练习{{ title }}页面/h2divid:{{ id }}/divdivprops: {{ props }}/divbutton clickrouterGoBack返回上一页/buttonbrbutton clickrouterGo(/home/lx/childA)去子路由childA/button!-- router-view/router-view --router-view //div
/templatescript langts
import { defineComponent, onMounted, reactive, toRefs } from vue
import { useRoute, useRouter } from vue-router// vue3.0语法
export default defineComponent({name: Tigerhhzz,props: {id: {type: String,default: },title: {type: String,default: },},setup(props) {const route useRoute()const router useRouter()const state: any reactive({id: ,title: ,routerGoBack: () {router.go(-1) // go(-1)回到上一个路由// 也可以用router.replace(/home)跳回指定页},routerGo: (path) {router.push(path)}})onMounted(() {console.log(lx route, route)console.log(lx props, props)if (route.query) {state.id route.query.idstate.title route.query.title}})return {props,...toRefs(state)}},
})
/script3.7、views文件夹下的Home文件夹下的ChildA.vue文件代码
templatediv stylefont-size: 14px;background: skyblue;h3我是ChildA组件/h3h3route.query:{{ route.query }}/h3/div/templatescript langtsimport { defineComponent, onMounted, } from vueimport { useRoute, useRouter } from vue-router// vue3.0语法export default defineComponent({name: ChildA,setup() {const router useRouter()const route useRoute()function goBack() {router.go(-1)}onMounted(() {console.log(route)})// 可以在页面销毁前清除事件// onUnmounted(() {// proxy.$mittBus.off(mittUserA)// })return {route, goBack}},})/script4、测试效果
初始页面效果 先点击push跳转到/home/tigerhhzzb页面嵌套一层的路由页面效果 嵌套一层的路由从原本/home跳入了/home/tigerhhzzb 子路由页面点击回到首页。 再点击push跳转到/home/tigerhhzz页面嵌套多层的路由页面效果 子路由效果
先去到了第一层/home/tigerhhzz子路由页面
再点击去子路由childA按钮页面效果
进到了嵌套的第二层/home/tigerhhzz/childA子路由页面 点击可返回上一页/home/lx 再点击可回到/home首页。
