route的区别
理解:
router可以理解为一个容器管理了一组
route是进行当前ULR和组件的映射关系,它包含了很多的属性和对象(比如history对象),任何页面都可以调用他的push(),replace(),go()等方法
const router = new Router({
routes: [
{
path: '/',
name: 'home',
component: home,
},
{
path: '/login',
name: 'login',
component: login
},
{
path: '/about',
name: 'about',
component: about,
beforeEnter:(to,from,next)=>{
// console.log('路由独享守卫to',to);
// console.log('路由独享守卫from',from);
next()
}
}
]
})
$route是当前激活的路由,包含了当前激活的路由状态信息,它包含了当前URL解析得到的信息.
$router对象的属性
- $router.app: 配置了
router的Vue根实例 - $router.mode: 路由使用的模式
- $router.currentRoute: 当前路由对应的路由信息对象
$router钩子函数调用顺序图
$router对象方法
$router.beforeEach(to,from,next):是$router的钩子函数,全局前置守卫,异步解析执行,通常做一些拦截比如:登录拦截.$router.beforeResolve(to,from,next): 和$router.beforeEach(to,from,next)基本类似,区别是:$router.beforeResolve(to,from,next)的调用时机是在beforeEach和组件内的beforeRouteEnter之后,afterEach之前调用.$router.afterEach(to, from): 全局后置钩子他是在路由跳转完成后触发，参数包括to,from没有了next,他发生在beforeEach和beforeResolve之后，beforeRouteEnter之前.$router.push: 编程式导航,使用push方法,会导航到不同的URL,会想history添加新的记录,$router.replace: 和push很像,区别是它不会向history添加记录,会替换当前的history.$router.go(n): 方法的参数是一个整数, 会在history记录中向前或者后退多少步,和window.history.go(n)类似$router.back(): 编程式导航，后退一步记录，等同于$router.go(-1)。$history.forward(): 编程式导航，前进一步记录，等同于$router.go(1)。-
router.resolve: 解析目标位置,格式和<router-link>的to prop相同，current是当前默认的路由.使用场景如下:使用
router.resolve自定义一个页面跳转的方法Vue.prototype.$linkTo = function ({ path, query, type }) { if (typeof (arguments[0]) != 'object') { // 跳转路径 path = arguments[0]; } // 请求参数 query = query || {}; // 跳转类型 type = type || '_self'; let routeData = router.resolve({ path: path, query: query || {} }) console.log('router.resolve()的返回值：', routeData) window.open(routeData.href, type); }调用
<button @click="$linkTo({ path: '/about'})">去about页面</button> 点击这么button后会跳转到about页面,resolve的作用就是解析参数成一个完整的url
$route对象属性
-
$route.path: 返回字符串,对应当前路由的路径 -
$route.parms: 一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。 -
$route.query: 一个 key/value 对象，表示 URL 查询参数。例如，对于路径/foo?user=1，则有$route.query.user == 1，如果没有查询参数，则是个空对象。 -
$route.fullPath: 完成解析后的 URL，包含查询参数和 hash 的完整路径。 -
$route.name: 当前路由的名称，如果有的话
