一 this.$router 和 this. $route 区别
vue官方文档说明:
通过注入路由器，我们可以在任何组件内通过 this.
r
o
u
t
e
r
访
问
路
由
器
，
也
可
以
通
过
t
h
i
s
.
router 访问路由器，也可以通过 this.
router访问路由器，也可以通过this.route 访问当前路由.
通过打印出: this.$router 和 this. $route :
this.$router(路由实例) : 是VueRouter的实例.包含了很多属性和对象（比如 history 对象），任何页面都可以调用其 push(), replace(), go() 等方法。
this.$route: 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name, path, meta, params, query 等属性。
1.2 路由实例的方法
1全局挂载路由实例
// 全局注册的路由
Vue.use(VueRouter)
2 路由实例方法push
详见下文: 二 路由传参的2种方式 (即:路由实例(this.$router)的push方法)
3 路由实例方法go
// 页面路由跳转 前进或者后退
this.$router.go(-1) // 后退
4 路由实例方法replace
//push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，
不会向 history 栈添加一个新的记录
<router-link to="/05" replace>05</router-link>
// 一般使用replace来做404页面
this.$router.replace('/')
二 路由传参的2种方式 (即:路由实例(this.$router)的push方法)
1 分为2大类: query 和params 2种方式.
2 每种方式中又分为2类, < router-link to=’…’ > 和 this.$router.push.
3 点击< router-link :to="…"> 等同于调用 this. $router.push(…).
2.1 第1类: params (类似post请求 参数在路径不可见)
第1种: this. $router.push(…)
传参&获取:
传参:
const userId = '123';
//命名的路由
this.$router.push({name:'user', params:{userId}}); //---> /user/123
***这里的 params 不生效 (重点情况)***
this.$router.push({path:'/user', params:{userId}}); //---> /user
获取参数：
this.$route.params.userId
url 形式：url 不带参数.
http:localhost:8080/#/user
总结: params传参时, 提供path, params将会被忽略,
push 里面只能是 name:‘xxx’，不能是 path:’/xxx’，
因为 params 只能用 name 来引入路由，如果这里写成了 path ,接收参数页面会是: undefined;
第2种: < router-link :to="…">
传参&获取:
传参:
<router link ：to='/gameInfo/'+uid+"/"+gameid />
//路由中：
{
path:'/gameInfo/':uid/:gameid
name:gameInfo,
component:()=>import('./views/gameInfo')
}
获取参数:
//像这样在url中传入一个参数，这个参数可以是data中的一个数据，
//也可以是一个动态的参数，在gameInfo页面接收参数的时候用params接收，比如：
this.$route.params.uid //这里的uid是路由中：后边的参数
2.2 第2类: query(类似get请求 参数在路径可见)
第1种: this. $router.push(…)
传参&获取:
传参: (path 只和 query搭配, path不和params搭配)
this.$router.push({path:'/user', query:{userId: '123'}});
获取参数：
this.$route.query.userId
url形式:url中带参数.
http:localhost:8080/#/user?userId=123
获取参数:
this.$route.query.userId
总结:如果提供path, 需要使用 query方式传参. (path 只和 query搭配, path不和params搭配)
第2种: < router-link :to="…">
传参:
<router link to='/gameInfo?uid='+uid />
获取:
this.$route.query.uid
注意: 以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
2.3 只跳转,不传参数
// 路径直接写:字符串
this.$router.push('home') // 只是跳转,不传参数
//对象
this.$router.push({path:'home'}) // // 只是跳转,不传参数
2.4 监听路由
(1)在组件内，即 this.$route
(2)在 $route 观察者回调内 router.match(location) 的返回值
(3)导航守卫的参数：
router.beforeEach((to, from, next) => {
// to 和 from 都是 路由信息对象
})
watch: {
$route(to, from) {
// to 和 from 都是 路由信息对象
}
}
三 this.$route的各种语法
this. $route.query
this. $route.params
this. $route.path
this. $route.matched
<router-link
class="icon-go"
:to="{ name: '首页'}"
v-if="$route.matched[0].path=='/category'">
</router-link>
<span class="icon-go" @click="$router.go(-1)" v-else></span>
<slot name="title"></slot>
$route.path
类型: string
字符串，对应当前路由的路径，总是解析为绝对路径，如 /foo/bar。
$route.params
类型: Object
一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
$route.query
类型: Object
一个key/value 对象，表示 URL 查询参数。例如，对于路径/foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。
$route.matched
类型:Array
一个数组，包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。
const router = new VueRouter({
routes: [
// 下面的对象就是路由记录
{ path: '/foo',
component: Foo,
children: [
// 这也是个路由记录
{ path: 'bar',
component: Bar }
]
}
]
})
当 URL 为 /foo/bar，$route.matched 将会是一个包含从上到下的所有对象 (副本)。
$route.fullPath
路由是：/path/:type真正路径是：/path/list
path匹配路径: /path/list
fullPath匹配路由: /path/:type
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true ,keepAlive:true}//1.权限 2.内存缓存，单页面切换
}
]
}
]
})
先理解什么是路由记录 ： 路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。
上方代码中的路由记录见下方：
//一级路由
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true ,keepAlive:true}//1.权限 2.内存缓存，单页面切换
}
]
}
//一级路由的子路由
{ path: 'bar',component: Bar,meta: { requiresAuth: true ,keepAlive:true } }
//两者都是 路由记录
定义路由的时候可以配置 meta 字段
根据上面的路由配置，/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录
一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。
检查路由记录中的 meta 字段 ，我们需要遍历 $route.matched
$route.matched
一个数组，包含当前路由的所有嵌套路径片段的路由记录
一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组
路由元信息 .meta $route.matched 搭配路由守卫 进行验证
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!auth.loggedIn()) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // 确保一定要调用 next()
}
})
