Vue实战之Router路由

路由跳转方式

// 字符串
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' })
*/