Vue3 实现路由vue-router效果

一、创建项目(这里创建名字为test的vue3文件)

1.打开cmd，跳转到任意一个文件夹（最好新建一个存放项目）

2.输入以下代码 创建名字为test的项目

vue create test
1

3.选择vue3 回车（Enter）

4.等待中…（再次回车下Enter）

5.出现如下的界面，则创建成功

6.（根据蓝色字的提示）在终端中输入cd test、npm run serve

7.复制蓝色的字体（二选一），粘贴到浏览器上

8.出现如下界面，则创建成功

查看下面的文章，根据 3.常见设置 配置项目的文件

二、下面正式进入vue-router + vue3 的使用

1.src下创建router文件夹，在router中创建index.js文件

2.创建路由组件

按照下面的结构创建pages文件夹
在pages文件夹里面分别创建Home和User文件夹
分别在这两个文件夹下面创建index.vue文件

在Home路由组件index.vue下

<template>
  <div class="">
Home
  </div>
</template>

<script>
export default {
  name: '',
  props: {},
  data () {
    return {}
  },
  components: {
    
  },
  computed: {
    
  },
  mounted: {
    
  },
  watch: {
    
  },
  methods: {
    
  },
  created () {
    
  },
  mounted () {
    
  },
}
</script>

<style scoped>
  
</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

在User路由组件index.vue下

<template>
  <div class="">
User
  </div>
</template>

<script>
export default {
  name: '',
  props: {},
  data () {
    return {}
  },
  components: {
    
  },
  computed: {
    
  },
  mounted: {
    
  },
  watch: {
    
  },
  methods: {
    
  },
  created () {
    
  },
  mounted () {
    
  },
}
</script>

<style scoped>
  
</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

3.index.js具体写法

3.1 先在终端中下载vue-router的相关依赖

vue3 是可以下载最新版的vue-router的

npm install  vue-router@next
1

3.2 import 导入需要的两个函数

import { createWebHistory,createRouter } from "vue-router";
1

3.3 导入创建好的路由组件

(导入组件的时候，import后面跟着的字符串是可以我们自定义命名的)

import Home from '@/pages/Home'
import User from '@/pages/User'
1
2

这里为啥是@,因为上面的链接里面在基本配置中将src变成了@，
但是 写成如下这样也没有问题

import Home from 'src/pages/Home'
import User from 'src/pages/User'
1
2

3.4 创建history

const history = createWebHistory();
1

3.5 创建路由相关信息

path是访问路径（自定义）
component是上面导入的自定义组件的名字

const router = createRouter({
    history,
    routes: [
        {
            path:'/',
            component:Home
        },
        {
            path:'/user',
            component:User
        }
    ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13

3.6 将创建好的路由信息暴露出来

export default router;
1

完整代码

import { createWebHistory,createRouter } from "vue-router";

import Home from '@/pages/Home'
import User from '@/pages/User'
import modue from 'src/';

const history = createWebHistory();
const router = createRouter({
    history,
    routes: [
        {
            path:'/',
            component:Home
        },
        {
            path:'/user',
            component:User
        }
    ]
})

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

4.main.js

4.1 导入暴露出来的模块

在index.js中，

export default router;
1

router 被暴露出来了，在main.js 中导入：

import router from '@/router'
1

4.2 挂载到 app组件中

createApp(App).use(router).mount('#app')
1

main.js完整代码

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'

createApp(App).use(router).mount('#app')
1
2
3
4
5

5.App.vue 中的使用

5.1 路由的显示位置：

  <router-view></router-view>
1

5.2 路由如何实现跳转

  <router-link to="/">首页</router-link>
  <router-link to="/user">用户</router-link>
1
2

解析：
跳转组件的书写格式如下：

<router-link to=""></router-link>
1

当在页面上点击，首页的时候就跳转到对应的to的路径
to属性后面跟的参数，与router的index.js中的path路径一致才能实现相对应的跳转。

完整代码示例：

<template>

	  <router-link to="/home">首页&nbsp;&nbsp;&nbsp;&nbsp;</router-link>
	  <router-link to="/user">用户</router-link>
	  <router-view></router-view>
	  
</template>

<script>


export default {
  name: 'App',
  components: {
    // HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</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

6.页面展示

点击用户！！！