赞
踩
push(to: RouteLocationRaw): Promise<NavigationFailure | void | undefined>
replace(to: RouteLocationRaw): Promise<NavigationFailure | void | undefined>;
to
与 router.push
接受的对象种类相同,所以两者的规则完全相同。params
的自动编码/解码。 $route / route: 有当前路由的所有信息!
$router / router: 用来进行路由操作的!
redirect: { name: 'routeName' }, 设置为路由的name最保险,别想着其他花里胡哨的。
在写 redirect 的时候,如果不是嵌套路由,可以省略 component 配置。
你重定向到自己的子路由,那肯定要有 component 啊,不然你 router-view 在哪(笑)
component 变 components,具体看代码
本示例包含 path , name , meta , component , components , children , redirect , props , 路由懒加载 , alias 。
- import { createRouter, createWebHistory } from 'vue-router'
-
- export const router = createRouter({
- history: createWebHistory(), // 设置路由模式
- routes: [
- {
- // 普通的设置一个普通的路由(顶级路由)
- path: '/',
- name: 'HelloWorld',
- meta: { requiresXXX: true }, // 设置路由元信息,应用场景的话:主要就路由守卫里用的会多一点。该数据只能在这里声明,其他途径无法修改。
- component: () => import('../components/HelloWorld.vue') // 设置路由懒加载
- },
- {
- path: '/routerVue/:id', // 设置为动态路由,id则必传
- // path: '/routerVue/:id?', // 设置该动态路由的 id 为可选参数,变为非必传
- name: 'routerVue',
- component: () => import('@/components/xxx.vue')
- },
- {
- path: '/demo',
- alias: '/hellow', // 你访问 /hellow,页面url路径会保持为/hellow,但是路由匹配则为/demo,显示 yyyyyy.vue 组件内容
- component: () => import('@/components/yyyyyy.vue')
- },
- {
- path: '/edit:id?',
- name: 'edit',
- // redirect: { name: 'profile' }, // 路由重定向,访问 /edit 直接重定向为 /edit/profile
- component: () => import('../components/edit.vue'),
- props: true, // 设置为true 则在路由组件中,动态路由的参数 会直接放在vue的 props 里。
- children: [ // 设置为嵌套路由
- {
- // 当 /edit 匹配成功
- // demo2.vue 将被渲染到 edit 的 <router-view> 内部
- path: '', // 路径为'',需要增加name,不然会抛出警告。
- component: () => import('../components/demo2.vue'),
- // 命名视图功能: component 变为 components ,然后设置对应视图组件的名称
- // components:{ // 注意加 s 。。。
- // default: () => import('../components/router-test1.vue'),
- // template1: () => import('../components/router-test2.vue'),
- // },
- // props: {default: true , template1: false} // 可以为每个命名视图定义 props 配置。还可设置为函数模式
- },
- {
- // 当 /edit/profile 匹配成功
- // demo.vue 将被渲染到 edit 的 <router-view> 内部
- path: 'profile',
- name: 'profile',
- component: () => import('../components/profile.vue'),
- }]
- },
- {
- // 匹配所有路径,当上述路径都不满足时,跳转到404页面
- // 如果项目是有动态添加路由的,注意一定要把该404路由提取出来,等动态添加完路由,再把404添加到动态路由的最后一个。
- path: '*',
- name: '404',
- component: () => import('../components/404.vue'),
- },
- ],
- })
-
<router-link :to="{ name: 'vue33', params: { id: 110 }, query: { d1: 'wuwu~~~' } }">vue3.3/3.4新特性</router-link>
- this.$router.push({
- name: 'vue33',
- params: {
- id: 110
- },
- query: {
- data: 666
- }
- })
- import { useRouter } from 'vue-router'
- let router = useRouter()
- function tiaozhuan() {
- router.push({
- name: 'vue33',
- params: {
- id: 110
- },
- query: {
- data: 666
- }
- })
- }
- import { useRouter } from 'vue-router'
- let router = useRouter()
- function tiaozhuan() {
- router.replace({
- name: 'vue33',
- params: {
- id: 110
- },
- query: {
- data: 666
- }
- })
- }
跳转目标路由,声明了params或query之后,(选项式api写法) 通过this.$route.params 或 this.$route.query 即可拿到对应的路由参数;
组合式API写法如下:
-
- import { useRoute } from 'vue-router'
-
- let route = useRoute()
-
- console.log(route.params);
- console.log(route.query);
- console.log(route.meta);
route: 有当前路由的所有信息
router: 用来进行路由操作的!
组件守卫:有3个,其中2个没屁用。
beforeRouteEnter :能处理的 beforeEnter 都可以。
beforeRouteUpdate :更没必要,直接 watch route.params 即可。
beforeRouteLeave :有点用,如果用户跳转路由时,当前页面编辑内容未保存,则可以 return false 取消路由跳转。(setup 内则手动引入 onBeforeRouteLeave)
触发顺序(1)(2)(3)(4)。
组件守卫其中2个懒得算,如果算上 beforeRouteLeave 那 beforeRouteLeave 排在beforeEach 前面。
每个守卫方法接收两个参数:
- import { createRouter } from 'vue-router'
- const router = createRouter({ ... })
-
- router.beforeEach((to, from) => {
- // ...
-
- return false
- // 返回 false 以取消导航
- // 如果什么都没有,undefined 或返回 true,则导航是有效的,并调用下一个导航守卫
-
- // return { name: 'Login' } // 将用户重定向到登录页面
- })
应用场景示例:页面菜单和所拥有的路由是根据用户角色动态生成的,此时就需要配合addRoute功能来实现需求。
- //! 动态添加路由、删除路由、添加嵌套路由
- router.addRoute({ path: '/about', component: xxx })
-
- // 当路由被删除时,所有的别名和子路由也会被同时删除
- // 会返回一个回调,调用该函数即可删除路由 (这种方式可以保证删的更准点吧。。。)
- const removeRoute = router.addRoute({ path: '/about', component: xxx })
- removeRoute()
- // router.removeRoute('about') 通过路由名称进行删除,路由表有同名的话需要注意点(建议路由表name都是唯一的!)
-
- // 添加嵌套路由
- // router.addRoute({ name: 'admin', path: '/admin', component: Admin })
- // router.addRoute('admin', { path: 'settings', component: AdminSettings })
- //> 上述代码等同如如下:
- // router.addRoute({
- // name: 'admin',
- // path: '/admin',
- // component: Admin,
- // children: [{ path: 'settings', component: AdminSettings }],
- // })
Vue Router 提供了两个功能来查看现有的路由:
<router-view>、<keep-alive> 和 <transition>
transition 和 keep-alive 现在必须通过 v-slot API 在 RouterView 内部使用:
- <router-view v-slot="{ Component }">
- <transition>
- <keep-alive>
- <component :is="Component" />
- </keep-alive>
- </transition>
- </router-view>
- import { createRouter, createWebHashHistory } from 'vue-router'
- const router = createRouter({
- history: createWebHashHistory(),
- routes: [
- //...
- ],
- })
html5模式需要在服务器上设置初次访问如果404时,进行路由回退:
nginx 如下:
- location / {
- try_files $uri $uri/ /index.html;
- }
其他的详见官网;
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。