文章目录

• • P23 Vue3路由的基本使用
  • P24 动态路由和404NotFound
  • • 动态路由
    • 404NotFound
  • p25 路由正则与重复参数
  • • 路由正则
    • 重复参数
  • p26 嵌套路由
  • p27 使用js跳转页面(编程式导航)
  • p28 命名路由与重定向别名
  • • 命名路由
    • 重定向
    • 别名
  • p29 路由模式与导航守卫

P23 Vue3路由的基本使用

npm init vite-app projectname
cd projectname
yarn
yarn add vue-router@4 --save

本视频不全，所以去看了晓舟老师的手把手教你学Vue3-路由基础-页面跳转的视频

App.vue

router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../components/Home.vue'
import Blog from '../components/Blog.vue'const routes = [{ path: '/home', component: Home },{ path: '/blog', component: Blog },
]const router = createRouter({history: createWebHashHistory(),routes
})export default router

main.js

import router from './router'const app = createApp(App)
app.use(router)
app.mount('#app')

P24 动态路由和404NotFound

动态路由

个人认为老师讲的不太详细，看完老师的这一节后，又去看了晓舟老师的手把手教你学Vue3-路由传参(动态路由)

列表页直接到详情页 （没有公共的部分)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SMRNiTzm-1668577479177)(C:\Users\张丽君\Pictures\堆糖\动态路由.gif)]

App.vue

router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import List from '../components/List.vue'
import Blog from '../components/Blog.vue'const routes = [{ path: '/', component: List },{ path: '/blog/:id', component: Blog },
]const router = createRouter({history: createWebHashHistory(),routes
})export default router

List.vue

Blog.vue

404NotFound

NotFound.vue

router.js

import { createRouter, createWebHashHistory } from 'vue-router'
import NotFound from '../components/NotFound.vue'const routes = [{ path: '/:path(.*)', component: NotFound }
]const router = createRouter({history: createWebHashHistory(),routes
})export default router

p25 路由正则与重复参数

路由正则

router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import NotFound from '../components/NotFound.vue'
import Article from '../components/Article.vue'const routes = [{ path: '/article/:id(\\d+)', component: Article },{ path: '/:path(.*)', component: NotFound }
]const router = createRouter({history: createWebHashHistory(),routes
})export default router

Article.vue

重复参数

参考文档：https://router.vuejs.org/zh/guide/essentials/route-matching-syntax.html#%E5%8F%AF%E9%87%8D%E5%A4%8D%E7%9A%84%E5%8F%82%E6%95%B0

import { createRouter, createWebHashHistory } from 'vue-router'
import Film from '../components/Film.vue'
const routes = [{ path: '/film/:id+', component: Film },
]
const router = createRouter({history: createWebHashHistory(),routes
})
export default router

p26 嵌套路由

路由里面再使用路由

index.js

import { createRouter, createWebHashHistory } from 'vue-router'import User from '../components/User.vue'
import HengBan from '../components/HengBan.vue'
import ShuBan from '../components/ShuBan.vue'const routes = [{path: '/user',component: User,children: [{path: 'hengban', component: HengBan},{path: 'shuban', component: ShuBan}]}
]const router = createRouter({history: createWebHashHistory(),routes
})export default router

User.vue

HengBan.vue

p27 使用js跳转页面(编程式导航)

之前可以使用

参考文档——编程式导航

Page.vue

index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import List from '../components/List.vue'
import Blog from '../components/Blog.vue'
import NotFound from '../components/NotFound.vue'import User from '../components/User.vue'
import HengBan from '../components/HengBan.vue'
import ShuBan from '../components/ShuBan.vue'
import Page from '../components/Page.vue'const routes = [{ path: '/', component: List },{ path: '/blog/:id', component: Blog, name: 'blog' },{ path: '/:path(.*)', component: NotFound },{path: '/user',component: User,children: [{path: 'hengban', component: HengBan},{path: 'shuban', component: ShuBan}]},{path: '/page',component: Page}
]const router = createRouter({history: createWebHashHistory(),routes
})export default router

p28 命名路由与重定向别名

router.replace router.go

router.replace替换页面 前进后退 不能再用

router.go前进或者后退一页

命名路由

import { createRouter, createWebHashHistory } from 'vue-router'import Shop from '../components/Shop.vue'
import LeftSideBar from '../components/LeftSideBar.vue'
import RightSideBar from '../components/RightSideBar.vue'
const routes = [{path: '/shop',components: {default: Shop,LeftSideBar,// 它们与 `` 上的 `name` 属性匹配RightSideBar}}
]const router = createRouter({history: createWebHashHistory(),routes
})export default router

App.vue

重定向

{path: '/mall',redirect: '/shop'
}

别名

const routes = [{ path: '/', component: Homepage, alias: '/home' }]

p29 路由模式与导航守卫

hash 路由兼容更好，但是带#显得丑些， histroy 和正常 url 路径一样，但是需要在服务器进行单独配置。
hash 模式是用 createWebHashHistory() 创建的： 
用 createWebHistory() 创建 HTML5 模式，推荐使用这个模式：

import { createRouter, createWebHashHistory } from 'vue-router'
import Page from '../components/Page.vue'const routes = [{path: '/page',component: Page,// 路由级别的导航守卫beforeEnter: (to, from, next) => {// ...}},]
const router = createRouter({history: createWebHashHistory(),routes
})
// 全局注册前置守卫
router.beforeEach((to, from, next) => {})export default router