在我们写路由页面的时候,不只是单纯地进行路由页面配置,还涉及到传参等一系列的api,今天我们就来讲解下。
一.路由元meta
作用:这是我们在进行路由配置的时候可以添加的一些api
代码:
Store/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import a from '@/views/a.vue'
import aa from '@/views/aa.vue'
import a3 from '@/views/a3.vue'
import af from '@/views/af.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: '首页',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ '../views/shouye.vue'),
children: [
{
path: '1',
component: a,
meta: {
toLogin: true
}
},
{
path: '2',
component: aa,
meta: {
toLogin: true
}
},
{
path: '3',
component: a3
},
{
path: 'f',
component: af
}
]
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
在这个页面的二级路由下加了meta元的信息。
在a页面获取当前的路由信息
<template>
<div class="">二级路由</div>
</template>
<script>
export default {
created () {
console.log(this.$route)
},
name: '',
methods: {}
}
</script>
<style scoped></style>
获取当前路由信息:
添加路由元信息有什么作用呢？
在路由守卫里面可以通过meta路由元信息对页面做一个拦截处理。
那么就有人问了,你不就声明了一个变量来控制吗,我直接加一个不就行了
那我们来看看，是不是可以直接添加。
代码：
import Vue from 'vue'
import VueRouter from 'vue-router'
import a from '@/views/a.vue'
import aa from '@/views/aa.vue'
import a3 from '@/views/a3.vue'
import af from '@/views/af.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: '首页',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ '../views/shouye.vue'),
children: [
{
path: '1',
component: a,
meta: {
toLogin: true
},
xxx: false
},
{
path: '2',
component: aa,
meta: {
toLogin: true
}
},
{
path: '3',
component: a3
},
{
path: 'f',
component: af
}
]
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
在这里我们直接添加xxx值为false。在进行获取。
页面效果:
?可以发现是获取不到的。
我们进行代码的修改,通过this.$router获取这个路由的信息在去看。
在a页面下：
<template>
<div class="">二级路由</div>
</template>
<script>
export default {
created () {
console.log(this.$router.options)
},
name: '',
methods: {}
}
</script>
<style scoped></style>
?
我们能看到我们添加的xxx变量。
结论:
1meta能够给路由添加一些说明信息,来控制页面的显示和隐藏。
2.在meta里面添加的信息可以通过获取当前的路由信息直接使用------------this.$route。
? ?直接声明变量的信息需要通过获取整个路由信息来进行使用-------------- this.$router。
二.router和route的区别
在上面的一个案例中,我们已经通过this.$router获取到整个路由的配置信息了。
而this.$route获取的是当前的路由信息。
三.路由的传参
1.传参的方式分为3种
（1）分为基本路由传参
? (2)? 动态匹配传参
? (3) 通过name传参
2.通过代码来分析传参的方式
布局的页面：
<template>
<div class="">
<button @click="fn">params传参</button>
<button @click="fn1">query传参</button>
<button @click="fn2">name之query传参</button>
<button @click="fn3">name之params传参</button>
</div>
</template>
<script>
export default {
name: '',
methods: {
fn () {
this.$router.push('/2/123')
},
fn1 () {
this.$router.push('/1?name=456')
},
fn2 () {
this.$router.push({ name: 'a3', query: { name: '玫瑰少年' } })
},
fn3 () {
this.$router.push({ name: 'af', params: { name: '得得得' } })
}
}
}
</script>
<style scoped></style>
路由匹配的界面:
import Vue from 'vue'
import VueRouter from 'vue-router'
import a from '@/views/a.vue'
import aa from '@/views/aa.vue'
import a3 from '@/views/a3.vue'
import af from '@/views/af.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: '首页',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ '../views/shouye.vue'),
children: [
{
path: '1/:id?',
component: a,
meta: {
toLogin: true
},
xxx: false
},
{
path: '/2/:id?', // ?代表参数值可传可不传，不写?一定要传
component: aa,
meta: {
toLogin: true
}
},
{
path: '3',
name: 'a3',
component: a3
},
{
path: 'f',
name: 'af',
component: af
}
]
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
基本传参query的a界面
<template>
<div class="">{{ name }}</div>
</template>
<script>
export default {
data () {
return {
name: this.$route.query.name
}
},
name: '',
methods: {}
}
</script>
<style scoped></style>
动态匹配的aa界面
<template>
<div class="">
<h1>{{ name }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
name: this.$route.query.name
}
},
name: '',
methods: {}
}
</script>
<style scoped></style>
通过name传参的界面
query:
<template>
<div class="">
<h1>{{ name }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
name: this.$route.query.name
}
},
name: '',
methods: {}
}
</script>
<style scoped></style>
params:
<template>
<div class="">
<h1>{{ name }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
name: this.$route.params.name
}
},
name: '',
methods: {}
}
</script>
<style scoped></style>
效果图:
?
点击四个按钮刷新后，只有第四个页面，通过name方式params传参的页面参数丢失,其它页面的参数都没有丢失。
总结:
1.基本路由传参
传：
案例中的代码:
this.$router.push('/1?name=456')模板用法:this.$router.push('/1?参数名=值&参数名1=值1')收:
案例中:
name: this.$route.query.name
模板用法：
name: this.$route.query.参数名2.动态路由匹配传参
传:
案例中:
{
path: '/2/:id?', // ?代表参数值可传可不传，不写?一定要传
component: aa,
meta: {
toLogin: true
}
},
this.$router.push('/2/123')
模板：
{
path: '/2/:参数名?', // ?代表参数值可传可不传，不写?一定要传
component: aa,
meta: {
toLogin: true
}
},
this.$router.push('/2/参数值')收:
案例中:
number: this.$route.params.id
模板：
number: this.$route.params.参数名3.通过name传参
案例中:
fn2 () {
this.$router.push({ name: 'a3', query: { name: '玫瑰少年' } })
},
fn3 () {
this.$router.push({ name: 'af', params: { name: '得得得' } })
}
模板：
fn2 () {
this.$router.push({ name: 路由的名字, query: { 参数名: 参数值} })
},
fn3 () {
this.$router.push({ name: 路由的名字, params: { 参数名: 参数值} })
}4.特点
1.query传参地址栏上的显示:
params地址栏上的显示:
结论：
query传参地址栏上的显示是以参数名=?参数值的形式
params传参地址上的显示是只有参数的值
2.通过name以params传参的形式刷新页面参数会丢失。
四.fullpath和path的区别
1.代码
<template>
<div class="">{{ name }}</div>
</template>
<script>
export default {
data () {
return {
name: this.$route.query.name
}
},
created () {
console.log(this.$route)
},
name: '',
methods: {}
}
</script>
<style scoped></style>
打印当前路由的信息:
?
