网站首页开发收费,seo公司优化排名,做网站怎么套模板,Wordpress 倒计时 代码Vue Router基础知识整理 1. 安装与使用#xff08;Vue3#xff09;安装使用 2. 配置路径别名和VSCode路径提示#xff08;了解#xff09;3. 使用查询字符串或路径传参query动态路由 与 params 4. router-link、定义别名、定义路由名称、编程式导航定义别名 aliasrouter-li… Vue Router基础知识整理 1. 安装与使用Vue3安装使用 2. 配置路径别名和VSCode路径提示了解3. 使用查询字符串或路径传参query动态路由 与 params 4. router-link、定义别名、定义路由名称、编程式导航定义别名 aliasrouter-link 与 定义路由名称编程式导航 router.push() 5. 嵌套路由 children6. 重定向 redirect7. 全局前置守卫 官方文档-
Vue Router官方文档 1. 安装与使用Vue3
安装
npm install vue-router4 或 yarn add vue-router4 版本4适用于Vue3Vue2请使用版本3
使用
文件结构 /router/index.js
import { createRouter, createWebHistory } from vue-router;const routes [{path: /,component: () import(/views/index.vue),name: index,meta: { title: 首页, icon: , keepAlive: true }}
]const router createRouter({history: createWebHistory(),routes,
})export default router;/main.js
import { createApp } from vue
import App from ./App.vue
import router from ./router/index.jsconst app createApp(App)
app.use(router)
app.mount(#app)
/App.vue
templaterouter-view v-if!$route.meta.keepAlive /router-view v-slot{ Component } v-if$route.meta.keepAlivekeep-alivecomponent :isComponent/component/keep-alive/router-view!-- 以下为版本3可支持写法 --!-- keep-aliverouter-view v-if$route.meta.keepAlive/router-view/keep-alive --
/templatescript setup
/script2. 配置路径别名和VSCode路径提示了解
作为了解新建Vue3项目时已配有
配置路径别名在代码编写编写中代替 /src VSCode路径提示
3. 使用查询字符串或路径传参
query
templateh1我是首页/h1p{{ route.query }}/p
/template
script setup
import { useRouter, useRoute } from vue-routerconst router useRouter();
const route useRoute();
/script选项式API用this.$route.query
动态路由 与 params
/router/index.js
import { createRouter, createWebHistory } from vue-router;const routes [{path: /,component: () import(/views/index.vue),name: index,meta: { title: 首页, icon: , keepAlive: true }},{path: /user/:id/username/:username,component: () import(/views/user.vue),name: user,meta: { title: 个人主页, icon: , keepAlive: true }}
]const router createRouter({history: createWebHistory(),routes,
})export default router;:[parma参数名]?表示该参数可不填
templateh1我是个人主页/h1p{{ route.params }}/p
/template
script setup
import { useRouter, useRoute } from vue-routerconst router useRouter();
const route useRoute();
/script选项式API用this.$route.params
4. router-link、定义别名、定义路由名称、编程式导航
定义别名 alias
alias
import { createRouter, createWebHistory } from vue-router;const routes [{path: /,// alias: /home, // 单个alias: [/home, /index], // 多个component: () import(/views/index.vue),name: index,meta: { title: 首页, icon: , keepAlive: true }},{path: /user/:id?/username/:username,component: () import(/views/user.vue),name: user,meta: { title: 个人主页, icon: , keepAlive: true }}
]const router createRouter({history: createWebHistory(),routes,
})
路径/ 和 /home、/index 是同一页面
router-link 与 定义路由名称 router-link to/home?title标题id1006查询字符串传参/router-linkrouter-link :to{path: /home, query: { title : 标题, id: 1006 }}查询字符串传参 - 动态属性绑定/router-linkrouter-link to/user/1006/username/hsy路径传参/router-linkrouter-link :to{name: user, params: { id : 1006, username: hsy }}路径传参 - 动态属性绑定/router-link编程式导航 router.push()
templatebutton clickgoto(1)跳转首页/buttonbutton clickgoto(2)跳转个人主页/button
/template
script setup
import { useRouter, useRoute } from vue-routerconst router useRouter();
const route useRoute();function goto(type 1) {if(type 1) {// router.push(/home?title标题id1006)router.push({path: /home, query: { title : 标题, id: 1006 }});} else {// router.push(/user/1006/username/hsy)router.push({name: user, params: { id : 1006, username: hsy }});}
}
/script5. 嵌套路由 children
/router/index.js
import { createRouter, createWebHistory } from vue-router;const routes [{path: /,// alias: /home, // 单个alias: [/home, /index], // 多个component: () import(/views/index.vue),name: index,meta: { title: 首页, icon: , keepAlive: true }},{path: /user/:id?/username/:username,component: () import(/views/user.vue),name: user,meta: { title: 个人主页, icon: , keepAlive: true }},{path: /vip,component: () import(/views/vip/index.vue),name: vip,meta: { title: 会员页, icon: , keepAlive: true },children: [{path: info,component: () import(/views/vip/info.vue),}]}
]const router createRouter({history: createWebHistory(),routes,
})export default router;/views/vip/index.vue
templateh1会员页/h1-----------------------------router-view/router-view-----------------------------
/template6. 重定向 redirect
import { createRouter, createWebHistory } from vue-router;const routes [{path: /,// alias: /home, // 单个alias: [/home, /index], // 多个component: () import(/views/index.vue),name: index,meta: { title: 首页, icon: , keepAlive: true }},{path: /user/:id?/username/:username,component: () import(/views/user.vue),name: user,meta: { title: 个人主页, icon: , keepAlive: true }},{path: /vip,component: () import(/views/vip/index.vue),name: vip,meta: { title: 会员页, icon: , keepAlive: true },children: [{path: info,component: () import(/views/vip/info.vue),}]},{path: /myhome,// redirect : /,// redirect : /?title标题id1006,// redirect : {// path: /,// query: {// title: 标题,// id: 1006,// }// },// redirect : /user/1006/username/hsy,redirect : {name: user,params: {username: hsy,id: 1006,}},}
]const router createRouter({history: createWebHistory(),routes,
})export default router;7. 全局前置守卫
main.js
import { createApp } from vue
import App from ./App.vue
import router from ./router/index.jsconst app createApp(App)
app.use(router)
// 路由前置守卫
router.beforeEach((to, from, next) {console.log(即将进入的路由的信息to:,to);console.log(当前即将离开的路由的信息from:,from);if(to.name user) {// next(false); // 拦截不跳转next({path: /home}); // 拦截跳转到首页} else {next(); // 不拦截}
})
app.mount(#app)
