vue中router配置(2)

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

大家好,我是大帅子,今天我们继续接着昨天的话题来讲吧,今天讲一下路由的跳转,以及传参,我进行了一些的整理

---

1. 路由模式

• 官网介绍：router.vuejs.org/zh/guide/es…

• 路由有两种模式

  • hash路由例如: http://localhost:8080/#/home
  • history路由例如: http://localhost:8080/home (以后上线需要服务器端支持, 否则找的是文件夹)

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

1. hash 模式

   主要就通过改变hash值,不需要发请求
   
   

2. histroy模式

   主要是改变路径,要重新发请求
   
   需要配置后台
   

2.重定向

  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '*',
    name: 'notfound',
    component: ()=>('./404.vue)
  }

3. vue路由跳转传参

我们先看一个总的,一共四种路由的跳转

跳转方法	传参位置	路由规则	接收
< router-link to="/path?key=value">< /router-link>	/path?key=value	无特殊	$route.query.key
< router-link to="/path/值">< /router-link>	/path/值	/path/:key	$route.params.key
this.$router.push({path: "/path", query: {key: value}})	query的对象	无特殊	$route.query.key
this.$router.push({name: "com", params: {key: value})	params的对象	路由规则需要name属性	$route.params.key(注意,这种在内存中保存)

1 . query传参

1. 行内

// 传
<router-link to="/friend?name=niu&age=8">牛</router-link>

// 收
{{$route.query.name}}    
this.$route.query.age 

2. methods

// 传
 this.$router.push({
        path: "/friend",
        query: {
          name: "张三",
          age: 18
        }
      })
      
// 收
{{$route.query.name}}    
this.$route.query.age 

2. params

// 第一步
{
    path: '/friend/:name/:age',
    name: 'friend',
    component: () => import('./views/friend.vue')
},

// 第二步
<router-link to="/friend/李四/14">朋友</router-link>

//第三步  收
{{$route.params.name}}    
this.$route.params.age 

// 第一步 配置name
 {
    path: '/friend/:name/:age',
    name: 'friend',
    component: () => import('./views/friend.vue')
  },

// 第二步 跳
  this.$router.push({
        name: "friend",
        params: {
          name: "张三",
          age: 18,
        },
      });
      
// 第三步  收
{{$route.params.name}}    
this.$route.params.age 

---

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅         还需努力!大家一起进步!!!