vue-router

最新推荐文章于 2023-04-04 20:03:22 发布

杰尼杰尼+++

最新推荐文章于 2023-04-04 20:03:22 发布

阅读量384

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_57748949/article/details/117198941

本文详细介绍了在Vue.js项目中配置vue-router的过程，包括在main.js中的基础配置、路由文件夹创建、路由入口设置及new Vue启动。同时，深入讲解了params和query两种参数传递方式，包括各自的三种形式及其在路径显示和刷新页面后参数是否丢失的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1准备工作

建立vue.js项目文件夹，通过cmd命令，完成新建文件夹的相关项目配置

vue init webpack项目文件名

然后根据需要配置相关参数

cd进入项目文件名

npm i npm run dev

2在main.js文件中，进行关于app.vue的基础配置

引入vue

引入vue-router

引入各个路由对象

并配置路由路径和name

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: "/ZhzDesign",
  },

  {
    path: "/home",
    name: "Home",
    component: () => import("../views/Home.vue"),
  },
];

const router = new VueRouter({
  routes,
});

export default router;

使用vue-router挂载属性

3建立路由文件夹，以及相关路由文件

4在路由入口app.vue中流坑（router-view）

5new Vue启动

根据不同的页面分配不同的路由，就实现了路由的跳转

一、params

params有三种传参形式

1、router-link形式传参【在路径中显示参数，刷新页面参数不丢失】

//配置路由
path:'/path/:id'

//传递方式，在path后面跟上对应的值
<router-link :to="`/path/${id}`"><router-link>
  
//获取参数
$route.params.id

//传递后形成的路径，刷新页面，参数不丢失
/path/id值

2、编程式导航形式传参，通过path匹配路由【在路径中显示参数，刷新页面参数不丢失】

//配置路由
path:'/path/:id'

//传递方式，通过path匹配路由，且在path后面跟上对应的值
this.$router.push({
  path: `/path/${id}`
})

//获取参数
$route.params.id

//传递后形成的路径，刷新页面，参数不丢失
/path/id值
————————————————
版权声明：本文为优快云博主「于于·」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/m0_37843876/article/details/108196266

3、编程式导航形式传参，通过name匹配路由【不在路径中显示参数，刷新页面参数丢失】

//传递方式,通过name匹配路由
this.$router.push({
  name: "name", //路由配置中的name
  params:{
    id:222
  }
});

//获取参数
$route.query.name

//传递后形成的路径，刷新页面，参数丢失
/path
————————————————
版权声明：本文为优快云博主「于于·」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/m0_37843876/article/details/108196266

二、query

query有三种传参形式

1、router-link形式传参【在路径中？后面显示参数，刷新页面参数不丢失】

//传递方式
<router-link :to="{path:'/path',query:{id:'123'}}"><router-link>
//或者
<router-link :to="/path?id=123"><router-link>

//获取参数
$route.query.name

//传递后形成的路径，刷新页面，参数不丢失
/path?id=123

2、编程式导航形式传参，通过path匹配路由【在路径中？后面显示参数，刷新页面参数不丢失】

//传递方式，通过path匹配路由
this.$router.push({
  path:'/path',
  query: {
    id:'123'
  }
})

//获取参数
$route.query.name

//传递后形成的路径，刷新页面，参数不丢失
/path?id=123

3、编程式导航形式传参，通过name匹配路由【在路径中？后面显示参数，刷新页面参数不丢失】

//传递方式，通过name匹配路由
this.$router.push({
  name:'name',//路由配置中的name
  query: {
    id:'123'
  }
})

//获取参数
$route.query.name

//传递后形成的路径，刷新页面，参数不丢失
/path?id=123

总结：query和params分别都有三种形式可以传参：

router-link形式
通过path匹配路由的编程式导航形式
通过name匹配路由的编程式导航形式
而这其中只有params方式的通过name匹配路由的编程式导航形式不会在路径中带有参数（且刷新页面参数丢失），其他都会带有参数值（刷新页面参数不丢失）