[Vue]路由基础使用和路径传参

实际项目中不可能就一个页面，会有很多个页面。在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）编写路由配置文件:

//引入相关方法
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.在路由配置中 给我们的 :参数名 后加一个 ？ ,就可以表示不传该参数也可以。