vue3 vue-router 笔记

1.安装

 npm install vue-router
1

2.创建router文件，在main.js引入，创建home.about页面 app.vue文件添加路由占位符
router/index.js

  import { createRouter,createWebHashHistory, createWebHistory } from 'vue-router'
  import home from './views/home.vue'
  import about from '../views/about.vue'
  const routes = [
    {
      path:'/home',
      component: home
     },
     {
      path:'/about',
      component: about
     }
  ]
  const router = createRouter({
    // hash 模式跟 history 模式
    history: createWebHashHistory(),
    routes
  })
  export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from "./route/index"
const app = createApp(App)
app.use(router)
app.mount('#app')


1
2
3
4
5
6
7
8

app.vue

 <!-- replace 替换路径，不会回退 -->
    <router-link to="/home" replace active-class="active">首页</router-link>
    <router-link to="/about" active-class="active">关于</router-link>
    <router-view></router-view>
1
2
3
4

3.路由懒加载，redirect 从定向

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'


// 路由懒加载
// const home = () => import(/* webpackChunkName :'home'*/'../views/home.vue')
// const about = () => import(/* webpackChunkName :'about'*/'../views/about.vue')
const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        name: 'home',
        component: () => import(/* webpackChunkName :'home'*/'../views/home.vue'),
    },
    {
        path: '/about',
        name: 'about',
        component: () => import(/* webpackChunkName :'about'*/'../views/about.vue')
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

4.动态路由 创建user.vue文件
router/index.js

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
const routes = [

    // 动态路由
    {
        path: '/user/:id',
        name: 'user',
        component: () => import('../views/user.vue')
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

app.vue

 <router-link to="/user/123" active-class="active">用户123</router-link>
 <router-link to="/user/456" active-class="active">用户456</router-link>
1
2

user.vue

<div>user{{ $route.params.id }}</div>
1

5.404页面处理，创建404文件
使用 pathMatch

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
const routes = [
    // 404 页面不存在路由  后面加* 会解析输入的路径，不加则不解析
    {
        path: '/:pathMatch(.*)*',
        component: () => import('../views/404.vue')
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13

6.路由嵌套 创建详情1，2 文件

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        name: 'home',
        component: () => import(/* webpackChunkName :'home'*/'../views/home.vue'),
        children: [
            {
               path:'/home',
               redirect:'/home/detailOne'
            },
            {
                path: 'detailOne', //等同于 /home/detailOne
                component: () => import('../views/detailOne.vue')
            },
            {
                path:'detailTwo',
                component:()=> import('../views/detailTwo.vue')
            }
        ]
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

7.编程式跳转
app.vue 添加点击事件

<hr />
    <span @click="homeBtnClick">首页</span>
    <button @click="aboutBtnClick">关于</button>
    <button @click="goBack">返回</button>
    <router-view></router-view>
1
2
3
4
5

添加事件方法 query 传参

<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
function homeBtnClick() {
  router.push("/home");
}
function aboutBtnClick() {
  router.push({
    path: "/about",
    query: {
      name: "言念",
      age: 24,
    },
  });
}
function goBack() {
  router.back();
  router.go(-1);
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

about.vue

<template>
    <div class="about">
         about
         <h1>{{$route.query}}</h1>
    </div>
</template>
<script setup>
</script>
<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11

8.完整router/index.js

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
// import home from '../views/home.vue'
// import about from '../views/about.vue'


// 路由懒加载
// const home = () => import(/* webpackChunkName :'home'*/'../views/home.vue')
// const about = () => import(/* webpackChunkName :'about'*/'../views/about.vue')
const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        name: 'home',
        component: () => import(/* webpackChunkName :'home'*/'../views/home.vue'),
        children: [
            {
               path:'/home',
               redirect:'/home/detailOne'
            },
            {
                path: 'detailOne', //等同于 /home/detailOne
                component: () => import('../views/detailOne.vue')
            },
            {
                path:'detailTwo',
                component:()=> import('../views/detailTwo.vue')
            }
        ]
    },
    {
        path: '/about',
        name: 'about',
        component: () => import(/* webpackChunkName :'about'*/'../views/about.vue')
    },
    // 动态路由
    {
        path: '/user/:id',
        name: 'user',
        component: () => import('../views/user.vue')
    },
    // 404 页面不存在路由  后面加* 会解析输入的路径，不加则不解析
    {
        path: '/:pathMatch(.*)*',
        component: () => import('../views/404.vue')
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

9.完整的app.vue

<template>
  <div class="app">
    <h1>app content</h1>
    <!-- replace 替换路径，不会回退 -->
    <router-link to="/home" replace active-class="active">首页</router-link>
    <router-link to="/about" active-class="active">关于</router-link>
    <router-link to="/user/123" active-class="active">用户123</router-link>
    <router-link to="/user/456" active-class="active">用户456</router-link>
    <hr />
    <span @click="homeBtnClick">首页</span>
    <button @click="aboutBtnClick">关于</button>
    <button @click="goBack">返回</button>
    <router-view></router-view>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
function homeBtnClick() {
  router.push("/home");
}
function aboutBtnClick() {
  router.push({
    path: "/about",
    query: {
      name: "言念",
      age: 24,
    },
  });
}
function goBack() {
  router.back();
  router.go(-1);
}
</script>
<style>
.active {
  color: red;
  font-size: 20px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43