vue中的路由
第一点：指令级别的路由<router-link>和程序级别的路由router.push();
第二点：通过query和params传递参数和path和name之间的关系。
第三点:
route地区别。
html中通过<router-link>指令完成路由跳转
第一种情况就是以path形式
<router-link v-bind:to="/foo">登幽州台歌</router-link>
第二种情况就是以路由对象Object的形式
<router-link :to="{ name: 'wuhan', query: {city: 'wuhan'}}">router1</router-link><br>
注意这里的name指的是具名路由，在路由列表中的配置如下
{ name: 'wuhan', path: '/wuhan', component: WuHan }
而WuHan则是这个路由要抵达的模板或者说页面，定义如下
const WuHan = {template: '<div>武昌， 汉口， 汉阳 --- {{$route.query.city}}</div>'}
注意由于在<router-link>中是通过query的形式区传递参数，所有在目的地页面中也只能采用query的形式获取参数。
也可以不采用query的方法，而采用params的形式传递参数
<router-link :to="{ name: 'wuhan', params: {city: 'wuhan'}}">router3</router-link><br>
那么在在路由列表中的path中必须带上params传递过来的参数，否则在目的页面中无法获取参数
{ name: 'wuhan', path: '/wuhan/:city',component: WuHan }
在目的页面中以params的形式获取参数对应的值
const WuHan = {template: '<div>武昌， 汉口， 汉阳 --- {{$route.params.city}}</div>'}
注意事项：不可以在<router-link>的路由对象中同时出现path和params，此时params作废。目的页面中获取不到参数。
推荐是name和params搭配，path和query搭配。最好时不用params而只是用query的形式传递参数以及获取参数，
因为采用params的方式传递参数，当你进入到目的页面后确实能够正确地获取参数,但是，当你刷新页面时，参数就会丢失。
所以推荐使用query地形式传递参数。
最后谈谈route地区别。结论：没有任何关系。
router是实现路由跳转的，
route。
或者是route.params.city。也就是说，
route作用在路由不同的阶段。
原文：https://blog.csdn.net/qq_23143555/article/details/81301873
路由守卫
正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。
全局前置守卫
你可以使用 router.beforeEach 注册一个全局前置守卫：
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。
每个守卫方法接收三个参数：
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
确保要调用 next 方法，否则钩子就不会被 resolved。
例子
- 列举需要判断登录状态的“路由集合”，当跳转至集合中的路由时，如果“未登录状态”，则跳转到登录页面LoginPage；
- 当直接进入登录页面LoginPage时，如果“已登录状态”，则跳转到首页HomePage；
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/',// 默认入口
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: '管理员', icon: 'dashboard' }
}]
}
]
权限判断部分，如果没有权限就会跳转到登录页
router.beforeEach(async (to, from, next) => {
// start progress bar
NProgress.start()
// set page title
document.title = getPageTitle(to.meta.title)
// determine whether the user has logged in
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({ path: '/' })
NProgress.done()
} else {
const hasGetUserInfo = store.getters.name
if (hasGetUserInfo) {
next()
} else {
try {
// get user info
// await store.dispatch('user/getInfo')
next()
} catch (error) {
// remove token and go to login page to re-login
await store.dispatch('user/resetToken')
Message.error(error || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next()
} else {
// other pages that do not have permission to access are redirected to the login page.
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
