vue-route

vue-router是什么，他有什么组件

vue-router是vue.js的路由管理器
vue-router的组件有:

<router-link to = "">路由的路径
<router-link :to="{name:'路由名'}">命名路由
<router-view>路由的显示

active-class是哪个组件的属性

active-class是属于vue-router的样式方法，当router-link标签被点击时将会应用这个样式
使用方法一：router-link标签内使用

<router-link to='/' active-class="active" >首页</router-link>

使用方法二：在路由js文件中配置active-class

vue的路由模式

路由模式有两种：history,hash

区别

1.表现形态不同
history: http://localhost:8080/about
hash:http://localhost:8080/#/about

2.跳转请求
history:http://localhost:8080/id —>发送请求

hash是不发送请求的

3.打包后前端自测要使用hash，如果使用history会出现空白页

4.spa是什么
是单页面应用，仅在Web页面初始化时加载相应的HTML,Javascript,Css。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或者跳转，取而代之是利用路由机制实现HTML内容的变换，UI与用户的交互，避免页面的重新加载
优点：
1.用户体验变好，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染
2.服务器的压力变小
3.前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理
缺点：
1.SEO优化不好
2.初次加载耗时多

vue的路径传值

1.显示
http://localhost:8080/about?a=1
传

this.$router.push({
        path: '/about',
        query: {
          a: 1
        }
      })

接

this.$route.query.a

2.隐式
http://localhost:8080/about

传

  this.$router.push({
       name: 'About',
       params: {
         a: 1
       }
     })

接

this.$route.params.a

路由导航有那些

全局路由、路由独享和组件内路由

1.全局路由
beforeEach(to,from,next),beforeResolve(to,from,next),afterEach(to,from)
to:要跳转到另一个页面
from:上一个页面
next():保安

2.路由独享
beforeEnter

3.组件内
beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave
(进入，更改，离开)

很少用组件内路由导航：原因是不好维护

场景：判断是否登录，如果登录就next(),没有的就跳转到登录页面

动态路由

问：怎么定义vue-router的动态路由，怎么获取传过来的值

可以使用query,param两种方式，区别：query是通过url传参，刷新页面参数还在，params酸性页面参数是不在的
param的类型：
配置路由格式：/router/:id
传递的方式：在path后面跟上对应的值
传递后形成的路径：/router/123

<!-- 动态路由-params -->
 
//在APP.vue中
    <router-link :to="'/user/'+userId" replace>用户</router-link>    
 
//在index.js
     {
    path: '/user/:userid',
    component: User,
    },

跳转方法：

// 方法1：
<router-link :to="{ name: 'users', params: { uname: wade }}">按钮</router-link>
// 方法2：
this.$router.push({name:'users',params:{uname:wade}})
// 方法3：
this.$router.push('/user/' + wade)

query类型
配置路由格式：/router，就是普通配置
传递的方式：对象中使用query的key作为传递方式
传递后形成的路径：/route?id=123

<!--动态路由-query -->
//01-直接在router-link 标签上以对象的形式
<router-link :to="{path:'/profile',query:{name:'why',age:28,height:188}}">档案</router-link>
/*
    02-或者写成按钮以点击事件形式
    <button @click='profileClick'>我的</button>    
*/
 
 //点击事件
 profileClick(){
   this.$router.push({
        path: "/profile",
        query: {
          name: "kobi",
          age: "28",
          height: 198
        }
      });
 }

跳转方法：

// 方法1：
<router-link :to="{ name: 'users', query: { uname: james }}">按钮</router-link>
// 方法2：
this.$router.push({ name: 'users', query:{ uname:james }})
// 方法3：
<router-link :to="{ path: '/user', query: { uname:james }}">按钮</router-link>
// 方法4：
this.$router.push({ path: '/user', query:{ uname:james }})
// 方法5：
this.$router.push('/user?uname=' + jsmes)

场景是详情页（文章，商品）

步骤：
首先在views文件中创建Test.vue和Details.vue

在router/index.js文件创建路由

 {
    path: '/test',
    name: 'Test',
    component:() => import('../views/Test.vue'),
    children: [
      {
        path: '/test/:id',
        name: 'Details',
        component: () => import('../views/Details.vue')
      }
    ]
  },

在Test.vue文件中

<div>
        <router-link to="/test/123">123</router-link>
        <router-link to="/test/456">456</router-link>
        <router-link to="/test/789">789</router-link>
        <router-view ></router-view>
    </div>

在Details.vue文件中

 <div>内容</div>

vue-router有几种导航钩子（导航守卫）

第一种：全局路由守卫
所谓全局路由守卫，就是小区的大门，整个小气就这个们，你想进去其中任何一个房子，都需要经过这个大门来检查
全局路由守卫有两个：一个是全局前置守卫，一个是全局后置守卫

router.beforeEach((to, from, next) => {
  console.log(to) => // 到哪个页面去？
  console.log(from) => // 从哪个页面来？
  next() => // 一个回调函数
}
router.afterEach（to，from） = {}

第二种：组件路由守卫
beforeRouteEnter进入，beforeRouteUpdate修改,beforeRouteLeave离开

// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter (to, from, next) {
  // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
  next(vm => {})
}
beforeRouteUpdate (to, from, next) {
  // 同一页面，刷新不同数据时调用，
}
beforeRouteLeave (to, from, next) {
  // 离开当前路由页面时调用
}

第三种：路由独享守卫
路由独享守卫是在路由配置页面单独给路由配置的一个守卫

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: 'Home',
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach，他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。

导航钩子有3个参数：

1、to:即将要进入的目标路由对象；

2、from:当前导航即将要离开的路由对象；

3、next ：调用该方法后，才能进入下一个钩子函数（afterEach）。

    next()//直接进to 所指路由
    next(false) //中断当前路由
    next('route') //跳转指定路由
    next('error') //跳转错误路由

总结：组件内导航守卫很少用，原因不好维护
应用：点击订单管理，如果你没有登录，他会拦截页面的显示，跳转到登录页面，如果已经登录就直接显示内容
场景：判断是否登录，如果登录就执行next(),否则跳转到登录页面。

$route和$router的区别

$router是vueRouter的实例，想要导航到不同URL,则使用$router.push

$route是$router进行跳转对象里面可以获取到name,query,path,params等
1.$route.path字符串，对应当前路由的路径，中是解析为绝对路径2.$route.params是一个key/value对象，包含动态片段和全匹配片段，如果没有路由参数，就是一个空对象
3.$route.query一个key/value对象，表示是url查询参数4.$route.name当前的路由名字
5.$route.meta路由元信息6..$route.hash当前路由的hash值(不带#)

1.字符串this.$route.push{(}^{\prime }hom{e}^{\prime })2.对象this.$route.push({path:‘home’})
3.命名的路由this.$router.push({name: ‘user’,params:{userId:123}})

注意push方法的跳转会向history栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面
go是页面路由跳转前进或者后退this.$router.go(-1)
//后退
push方法会向history栈添加一个新的记录，而replace方法是替换当前页面，不会向history栈添加一个新的记录