路由跳转方式
// 字符串
router.push('/')
// 含路径的对象
router.push({ path: '/' })
// 含命名的对象
router.push({ name: 'Home' })
// 含参数和查询参数的对象
router.push({ params: { id: 1 }, query: { page: 1 } })
当 <router-link> 被点击后，to 的值就会传到 router.push()，所以 to 的值有以下相应的写法：
<!-- 字符串 -->
<router-link to="/">Home</router-link>
<!-- 含路径的对象 -->
<router-link :to="{ path: '/' }">Home</router-link>
<!-- 含命名的对象 -->
<router-link :to="{ name: 'Home' }">Home</router-link>
<!-- 含参数和查询参数的对象 -->
<router-link :to="{ params: { id: 1 }, query: { page: 1 } }">Home</router-link>
路由守卫
// 组件内的路由导航守卫
beforeRouteEnter(to, from, next) {
// 路由的名称，对应路由配置中的 name
const fromName = from.name
// 确认导航
next(vm => {
// 通过 vm 参数访问组件实例，已登录时，评估路由名称
if (vm.$store.state.auth) {
switch (fromName) {
// 如果从注册页面跳转过来
case 'Register':
// 显示注册成功
vm.showMsg('注册成功')
break
}
}
})
}
/*
beforeRouteEnter 是组件内的路由导航守卫，在确认渲染该组件的对应路由前调用。该守卫不能访问 this，但我们通过传一个回调给 next，就可以使用上面的 vm 来访问组件实例。守卫的参数说明如下：
to：即将要进入的目标路由；
from：当前导航正要离开的路由，from.name 是路由的名称，对应路由配置中的 name；
next：一个用来 resolve 当前钩子的方法，需要调用该方法来确认或者中断导航；
参数 to 和 from 都是 路由对象 （route object），表示当前激活的路由的状态信息，其常用的属性有：
name：路由的名称，如 'Register'；
path：路由的路径，如 '/auth/register'；
params：路由参数对象，如 { id: "1" }；
query：URL 查询参数对象，如 { page: "1" }；
meta：元信息对象，如 { auth: true }；
*/
全局前置守卫
router.beforeEach((to, from, next) => {
// 获取仓库里的登录信息
const auth = router.app.$options.store.state.auth
if (auth && to.path.indexOf('/auth/') !== -1) {
// 如果当前用户已登录，且目标路由包含 /auth/ ，就跳转到首页
next('/')
} else {
next()
}
})
/*
使用 router.beforeEach 注册一个全局前置守卫，它在导航被触发后调用，我们可以通过跳转或取消的方式守卫导航，参数我们上面介绍过；
使用 router.app 可以获取 router 对应的 Vue 根实例，使用实例的 $options.store 可以从选项中访问仓库；
使用 next('/') 或者 next({ path: '/' }) 来跳转到一个新的地址；
*/
配置路由
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const routes = [
{
name:'',
path:'',
component:() => import(),
}
];
const router = new Router({
mode:'hash/history',
linkExactActiveClass: 'active',
routes,
})
//linkExactActiveClass 的值是一个类名，用来添加到与当前路由对应的 <router-link> 上，以显示当前精确激活的 <router-link>，
其默认值是 'router-link-exact-active'，我们这里改为 'active' 以利用 Bootstrap 的激活样式。
子路由
{
path: '/users/1/edit',
component: () => import('@/views/users/Edit.vue'),
children: [
{
path: '',
name: 'EditProfile',
component: () => import('@/views/users/Profile.vue'),
// auth 为 true，标识当前路由需要登录才能访问
meta: { auth: true }
}
]
},
/*
Profile.vue 作为 Edit.vue 的嵌套子页面，我们需要在父级添加 children 选项以指定子路由的配置；
子路由的 path 为空值 ''，表示该页面作为默认子路由，在导航到父级路由（/users/1/edit）时，就开始加载；
使用 meta 选项配置路由的元信息，其值可以是任意类型的数据，我们可以从路由对象中访问该值，如 to.meta.auth；
注：如果当前路由含有默认子路由，则不需要为当前路由指定 name，要导航到当前路由，可以使用默认子路由的 name，如 router.push({ name: 'EditProfile' })
*/
