标签：替换 路径 his 数组 添加 direct 等价 bsp cti
一、$route表示当前路由信息对象
表示当前激活的路由的状态信息，包含了当前URL解析得到的信息，还有URL匹配到的路由记录
路由信息对象：即$router会被注入每个组件中，可以利用它进行一些信息的获取
1）$route.path:
字符串，对应当前路由的路径，总是解析为绝对路径：‘/foo/bar‘
2)$route.params
一个key/value对象，包含了动态片段和全匹配片段
如果没有路由参数，就是一个空对象
3)$route.query
一个key/value对象，表示URL查询参数
例如对于路径：/foo?user=1,则有$route.query.user=1
如果没有查询参数就是一个空对象
4）$route.hash
当前路由的hash值：不带#，如果没有hash值，则为空字符串。锚点
5）$route.fullPath
完成解析后的URL，包含查询参数和hash的完整路径
6）$route.matched
数组，包含当前匹配的路径中所包含的所有片段所对应的的配置参数对象
7）$route.name
当前路径的名字
8）$route.meta
路由元信息
二、$route的应用场景
(1)在组件内，即this.$route
(2)在$route观察者回调内 router.match(loaction)
(3)导航守卫函数
router.beforeEach((to,from,next) => {
//to 和 from 都是路由信息对象
})
watch: {
$route(to, from){
//to 和 from 都是路由信息对象
}
}
三、$router对象
全局的路由实例，是router构造方法的实例
在vue实例内部，可以通过$router访问路由实例
import Router from ‘vue-router‘
const routes = [
{path:"/",name:首页,redirect:‘/home‘},
{path:‘/login‘,name:登录,component:Login},
{path:‘/home‘,component:Home}
]
const router = new Router {
routes
}
//全局注册路由，全局挂载路由实例
Vue.use(Vuerouter)
四、//路由实例方法
//字符串
this.$router.push(‘home‘)
//对象
this.$router.push({path:"home‘})
//命名路由
this.$router.push({name:user,params:{userId:123}})
//带查询参数，变成/register?plan=123
this.$router.push({path:"register",query:{plan:‘123‘}})
push方法和<route-link :to="...">是等价的
注意：push方法的跳转会向history栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面
五、路由实例方法go
//页面路由跳转，前进或者后退
this.$router.go(-1) //后退
//页面实例方法replace
push方法会向history栈添加一个新的记录，而replace方法是替换当前的页面
一般使用replace方法来做404页面
转自：https://www.jianshu.com/p/fa0b5d919615
标签：替换 路径 his 数组 添加 direct 等价 bsp cti
原文地址：https://www.cnblogs.com/jjbw/p/12129555.html
