实际项目中不可能就一个页面，会有很多个页面。在Vue里面，页面与页面之间的跳转和传参会使用我们的路由: vue-router
基础使用
要使用我们需要先给我们的项目添加依赖:vue-router。使用命令下载:
npm install vue-router使用路由会涉及到下面几个对象:
1.我们要跳转和传参的页面资源和我们的App.vue（挂载到容器上的vue对象）
2.routers.js 一个js文件，用于编写配置我们项目各个页面的访问路径等一系列信息。
3.main.js 项目的主要js文件，我们要将我们配置的路由信息注册给我们的vue对象。
现在我们来使用router。
（1）安装vue-router
（2）编写路由配置文件:
javascript
//引入相关方法
import {createRouter, createWebHistory} from 'vue-router'
//配置相关信息
const routes = [{
path: '/',//访问时使用的url
component:()=> import('../views/farie.vue')//目标页面资源文件所在位置
},{
path: '/flower',
component:()=> import('../views/flower.vue'),
}]
//创建路由对象，需要两个参数
const router = createRouter({
history:createWebHistory(), //第一个参数是使用哪种模式
routes //第二个参数是我们写好的路由信息对象
})
export default router //将我们的路由对象暴露（让其他js可以导入）（3）在main.js中给我们的vue对象注册路由信息:
（4）到App.vue（根组件）处使用标签:
然后我们在对应的页面资源里面随意编写信息，访问对应url查看效果。
路径传参和获取使用
路径传参一般有两种方式，一种是常规的 路径?键1=值1&键n=值n 的形式，另一种是占位符传参。
常规传参
想要常规传参传入的参数，直接在页面资源里调用即可。
访问并传参num的效果：
说明：在注册了路由之后，就可以使用route内置对象，通过$来引出。开发时使用的工具可能会没有提示，但不重要。route对象就是route对象，不是你自己命名的，和你注册的路由时使用的变量名还是暴露时用的变量名都没关系。
占位符传参
使用占位符传参时，有几点与常规传参不一样：
1.在路由配置中需要专门写出 路径/:参数名
2.在访问时，如果没有格外设置，必须要符合url格式才行。比如"/data/:uid"，那么你访问时必须是"/data/1233"这种，但是只通过"/data"访问会报错。
补充说明：
1.路径传参可以在页面代码块中获取，即可以使用插值表达式也可以用于函数传参。我们可以通过事件将拿到的值，赋给我们的js中的某个数据。
2.在路由配置中 给我们的 :参数名 后加一个 ？ ,就可以表示不传该参数也可以。