Vue3配置router路由步骤

Vue3配置router路由步骤

首先创建一个vue3的项目

先检查一下router的版本，可以在pakage.json里面查看，也可以你直接在终端输入

npm list vue-router
1

如果版本比较低的话，先升级一下
vue3的话，用以下命令

npm install vue-router@4
1

vue2的话用

npm install vue-router@3
1

准备工作完成后，就可以开始新建文件夹了，我们在src下面创建一个views
，然后再再views里面创建两个vue文件，分别是【index】和【content】
以下是两个文件的代码
【index】

【content】

接下来再去src路径下创建一个router文件夹，然后在router下面创建一个index.js
index.js配置如下：

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

const routes = [
    {
        path: '/',
        component:()=>import("../views/index.vue")
    },
    {
        path: '/content',
        component:()=>import("../views/content.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

最后一步，我们去Main.js上挂载一下，router就好了
代码如下：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

最后启动浏览器，不出意外的话就可以看得到了~

传参方式

通过以上的步骤，我们项目的router已经开始工作起来了，接下来我们再来看一下参数如何传递

1. 链接传参

直接在请求后面加？然后写参数，例如：

vue文件中取值方法如下：

id:{{ $route.query.id }}
1

2.路径传参

{
        path: '/user/:id',
        component:()=>import("../views/user.vue")
    }
1
2
3
4

完整截图

vue页面取值方式：

id:{{ $route.params.id }}
1

完整代码如下：

1
2
3
4
5
6
7

实例效果

多参数传值

 {
        path: '/user/:id/name/:name',
        component:()=>import("../views/user.vue")
    }
1
2
3
4

其它的一样，然后页面取值方式也是和单参数一样。浏览器效果如下
1

特殊情况下，路由里面定义了多参数，但是有些参数有时候不需要的话， 可以在参数后面添加？号，这样就不是必须要传递的参数了

{
      path: '/user/:id/name/:name?',
      component:()=>import("../views/user.vue")
  }
1
2
3
4