vue中路由 vue-router

router配置：
1.引入插件
2.安装插件并创建vueRouter对象

3.配置路由与组件之间的应用关系

4.暴露接口并在main.js中引入

1.
<router-link>
<router-view/>用于占位 配合使用
2.动态路由：
<router-link :to="'/user/'+userId">
配合监听watch:{
'$route'(){
this.$route.params.userId
}

路由懒加载 将路由对应的组件打包成一个个js代码块，只有当这个组件被访问到的时候才会被加载
三种写法：常用：component:（）=>import('../components/about')

嵌套路由：
1.

2.在home组件中

参数传递：
1.params类型：
路由配置：/users/：id
传递参数：<router-link :to="'/user/'+userId"> this.$router.push({path:'/user',params:{id:25}})
接受参数：this.$route.params.id
2.query类型
路由配置：/users
传递参数：
接收参数：this.$route.query.name

一般在router中hook.js进行路由守卫等的配置

路由守卫：
为了防止如果用户没有登陆而是直接通过url进入了除登陆页面的情况
router.beforeEach((to, from, next) => {
  // to将要访问的路径n'n'n'n'n'n'n'n'n'n'n'n'n'n'n'n'n
  // from
  // next() 是一个函数,表示放行  next('/login') 表示强制跳转
  if (to.path === '/login') return next()
  // 此时说明将要访问home(非登录页的其它页面)页面    获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  // 如果token不为空则放行
  next()

  // 此时如果从url直接进入home会返回login页面
})