Vue学习（二十三）路由全攻略
路由对象
this.$route:访问当前路由
this.$route.name：获取当前路由名称
this.$route.hash：获取当前路由hash值（带#），如果没有hash值则为空字符串
this.$route.params：获取路由中配置的动态路径参数
this.$route.params.pathMatch：在路由中使用通配符（*）时，获取 URL 通过通配符被匹配的部分
this.$route.query：获取URL中的参数
this.$route.matched：一个数组，包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)
监听路由对象
watch: {
// 如果路由有变化，会再次执行该方法
'$route': 'fetchData'
},
methods: {
fetchData () {
this.error = this.post = null
this.loading = true
// replace getPost with your data fetching util / API wrapper
getPost(this.$route.params.id, (err, post) => {
this.loading = false
if (err) {
this.error = err.toString()
} else {
this.post = post
}
})
}
}
或者
const User = {
template: '...',
watch: {
$route(to, from) {
// 对路由变化作出响应...
}
}
}
或者
// watch $route 决定使用哪种过渡
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}
参考：
this.$route.params和this.$route.query的区别
路由元信息：
Vue.js - 路由 vue-router 的使用详解4（没有嵌套路由时获取路由元信息meta）
vue-router官网api：路由对象（有嵌套路由时获取路由元信息）
编程式导航
this.$router:访问路由器（路由实例）
this.$router.push(location, onComplete?, onAbort?）：导航到不同的URL，会向history栈添加一条记录
this.$router.replace(location, onComplete?, onAbort?）：导航到不同的URL，不会向history栈添加一条记录
this.$router.go(n）： history 记录中向前或者后退多少步
this.$router.back()：请求(返回)上一个history记录
this.$router.resolve(location, current?, append?)：vue中在新窗口打开页面可以使用该方法，解析路由可以得到location、router、href等目标路由的信息，得到href就可以使用window.open开新窗口了，传递的location可以参考vue-router官网：编程式的导航
传参方式
1、使用 query
this.$router.push({
path: '/home',
query: {
site: [],
bu: []
}
})
2、使用 params
this.$router.push({
name: 'Home', // 路由的名称
params: {
site: [],
bu: []
}
})
params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params
query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。
二者的区别
-
query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效
-
query 在路由配置不需要设置参数，而 params 必须设置
-
query 传递的参数会显示在地址栏中
-
params如果不在路由中配置传参刷新会无效，但是 query 会保存传递过来的值，刷新不变 ;
-
路由配置：
query 写法
{
path: '/home',
name: Home,
component: Home
}
params 写法
{
path: '/home/：site/:bu',
name: Home,
component: Home
}
如果路由上面不写参数，也是可以传过去的，但不会在 url 上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会丢失，那依赖这个参数的 http 请求或者其他操作就会失败
获取路由参数
在接收的跳转的页面 :
created () {
let self = this
self.getParams()
},
watch () {
'$route': 'getParams'
},
methods: {
getParams () {
let site = this.$route.query.site
let bu = this.$route.query.bu
// 如果是params 传参，那就是this.$route.params.site 上面就可以获取到传递的参数了
}
}
params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。
params、query不设置也可以传参，但是params不设置的时候，刷新页面或者返回参数会丢失，query并不会出现这种情况
参考：
vue-router官网api：this.$router.resolve
this.$router.resolve Vue如何打开新窗口
声明式导航
<router-link to='xxx' tag='li'> To PageB </router-link>
<router-link to='xxx' tag='li' replace> To PageB </router-link>
注意：<router-link> 会默认解析成 a 标签，可以通过 tag 属性指定它解析成什么标签，点击<router-link to="....">等同于调用router.push(.....)，点击<router-link to="...." replace>等同于调用router.replace(.....)
命名路由
参考：
命名视图
路由和组件映射：
-
一个路由对应一个组件
-
多个路由对应一个组件
-
一个路由对应多个组件
命名视图就是解决第三种“一个路由对应多个组件”情况的！！！
导航守卫
导航守卫又称路由守卫，实时监控路由跳转时的过程，在路由跳转的各个过程执行相应的操作，类似于生命周期函数，在开发过程中经常被使用，比如用户点击一个页面，如果未登录就调到登录页面，已登录就让用户正常进入。
参考：
路由模式
history、 hash 和 abstract
参考：
