vue基础篇 12 vue-router补充

最新推荐文章于 2022-07-09 10:49:10 发布

LeyoBiang

最新推荐文章于 2022-07-09 10:49:10 发布

阅读量99

点赞数

分类专栏： vue 前端文章标签： vue js javascript vue.js css3

本文链接：https://blog.csdn.net/qilie_32/article/details/114951272

版权

前端同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

vue

12 篇文章 0 订阅

订阅专栏

12 vue-router补充

传递参数

类型

传递参数主要有两种类型: params和query

params 的类型 :
- 配置路由格式: /router/:id
- 传递的方式: 在path后面跟上对应的值
- 传递后形成的路径: /router/123, /router/abc
query 的类型 :
- 配置路由格式: /router, 也就是普通配置
- 传递的方式: 对象中使用query的key作为传递方式
- 传递后形成的路径: /router?id=123, /router?id=abc(类似于get请求)

方法

通过router-link传递

params

<template>
  <div id="app">
    <router-link
        :to="{
          path:'/params'+'/123',
        }">传递参数</router-link>
  </div>
</template>

url：http://localhost:8080/#/params/123

query

<template>
  <div id="app">
    <router-link
        :to="{
          path:'/params',
          query: {
            name:'biang',
            age:18
          }//以对象的形式作为参数
        }">传递参数</router-link>
  </div>
</template>

url：http://localhost:8080/#/params?name=biang&age=18

通过JavaScript代码传递

params

<script>
export default {
  name: 'App',
  methods:{
    toParams(){
      this.$router.push({
        path:'/params'+'/123'
        //router文件中需要将path设置为'/params/:id'
      })
    }
  },
  components: {
  }
}
</script>

url：http://localhost:8080/#/params/123

query

<script>
export default {
  name: 'App',
  methods:{
    toParams(){
      this.$router.push({
        path:'/params',
        query: {
          name:'biang',
          age:18
        }//以对象的形式作为参数
      })
    }
  },
  components: {
  }
}
</script>

url：http://localhost:8080/#/params?name=biang&age=18

接收参数

用于获取参数的两个方法都是对象

$route.params

获取通过params方法传入的参数，通过参数名获取对应的值

$route.query

获取通过query方法传入的参数，通过参数名获取对应的值

$r o u t e 和$ router的区别

$r o u t e r 为 V u e R o u t e r 实例，想要导航到不同 U R L ，则使用$ router.push方法
$route为当前router跳转对象里面可以获取name、path、query、params等

导航守卫

vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.
vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发.

用处

我们可以利用beforeEach来完成标题的修改.

首先, 我们可以在钩子当中定义一些标题, 可以利用meta来定义

其次, 利用导航守卫,修改我们的标题.

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import paramsTool from '../components/paramsTool'
//定义路由
const routes=[
    {
        path:'/params/:id',
        component:paramsTool,
        meta:{
            title:'params传递参数'
        }
    },
    {
        path:'/params',
        component:paramsTool,
        meta:{
            title:'非params传递参数'
        }
    }
]
//创建router实例
const router = new VueRouter({
    routes
})
router.beforeEach((to,from,next) => {
    window.document.title = to.meta.title
    next()
})
//导出router实例
export default router