Vue3路由——基本使用、动态路由、路由正则、重复参数、嵌套路由、编程式导航、命名路由、重定向、别名、路由模式与导航守卫

P23 Vue3路由的基本使用

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

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

App.vue

<template>
  <router-link to="/home">首页</router-link>
  <router-link to="/blog">博客</router-link>

  <!-- 切换页面 显示占位 -->
  <router-view></router-view>
</template>

<script>
export default {
     
  name: "App",
};
</script>

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

<template>
  <router-view></router-view>
</template>

<script>
export default {
     
  name: "App",
};
</script>

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

<template>
  <h1>列表</h1>
  <ul>
    <li v-for="item in blogList" :key="item.id">
      <router-link :to="'/blog/' + item.id">{
  { item.title }}</router-link>
    </li>
  </ul>
</template>