Vue3配置router路由步骤
首先创建一个vue3的项目
先检查一下router的版本,可以在pakage.json里面查看,也可以你直接在终端输入
npm list vue-router
如果版本比较低的话,先升级一下
vue3的话,用以下命令
npm install vue-router@4
vue2的话用
npm install vue-router@3
准备工作完成后,就可以开始新建文件夹了,我们在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
最后一步,我们去Main.js上挂载一下,router就好了
代码如下:Main.js文件中
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
最后启动浏览器,不出意外的话就可以看得到了~
传参方式
通过以上的步骤,我们项目的router已经开始工作起来了,接下来我们再来看一下参数如何传递
1. 链接传参
直接在请求后面加?然后写参数,例如:
vue文件中取值方法如下:
id:{{ $route.query.id }}
2.路径传参
{
path: '/user/:id',
component:()=>import("../views/user.vue")
}
完整截图
vue页面取值方式:
id:{{ $route.params.id }}
完整代码如下:
<template>
<div>
个人主页
<hr>
id:{{ $route.params.id }}
</div>
</template>
实例效果
多参数传值
{
path: '/user/:id/name/:name',
component:()=>import("../views/user.vue")
}
其它的一样,然后页面取值方式也是和单参数一样。浏览器效果如下
特殊情况下,路由里面定义了多参数,但是有些参数有时候不需要的话, 可以在参数后面添加?号,这样就不是必须要传递的参数了
{
path: '/user/:id/name/:name?',
component:()=>import("../views/user.vue")
}