vue-router路由使用

1、路由的安装

1. 首先安装

npm install i vue-router --save

2. 在main.js中引入。
   我们一般把router相关的内容写到一个单独的router文件夹中便于管理，然后再在main.js中引入这个文件。
   在new Vue时传入

import router from './router'
。。。
new Vue({router ,。。。})

3. router文件夹的index.js文件
   引入，并用Vue.use注册插件

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

定义路由routes 数组

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  。。。]

创建router实例
最后暴露出去，在main.js中引入。

const router = new VueRouter({
  routes
})
export default router

在组件内使用留坑。

2、路由的跳转

• 1、通过点击router-link标签

<router-link to='/goods'>

注：在router-link标签中的点击事件，需要添加.native修饰符,否则只会跳转，不会触发事件。

• 2、通过push方法

this.$router.push("/goods");

3、路由跳转时的传参

1、方法一

// 路由定义
{
  path: '/describe/:id',
  name: 'Describe',
  component: Describe
}
// 页面传参
this.$router.push({
  path: `/describe/${id}`,
})
// 页面获取
this.$route.params.id

2、方法二

// 路由定义
{
  path: '/describe',
  name: 'Describe',
  omponent: Describe
}
// 页面传参
this.$router.push({
  name: 'Describe',
  params: {
    id: id
  }
})
// 页面获取
this.$route.params.id

3、方法三

push时使用path的话，就不能使用params，只能使用query传参

// 路由定义
{
  path: '/describe',
  name: 'Describe',
  component: Describe
}
// 页面传参
this.$router.push({
  path: '/describe',
    query: {
      id: id
  `}
)
// 页面获取
this.$route.query.id

方法二参数不会拼接在路由后面,页面刷新参数会丢失
方法一和三参数拼接在后面,丑,而且暴露了信息。

4、$route和$router的区别

1、 $route是‘路由信息对象’

包括path，params、hash、query、fullPath、matched、name等路由信息参数

• path 当前路由的路径
• params 路由参数
• query url查询参数
• hash 当前路由的哈希值
• fullPath 当前路由的url，包含查询参数和hash的完整路径
• name 当前路由的名字

2、$router是路由实例对象

使用new VueRouter创建的实例。包含一些方法

• this.$router.go(-1) 跳转到上一页

• this.$router.push(‘/menu’) 跳转到指定路由

• this.$router.push({name:‘menu’}) 通过名字跳转

• this.$router.replace(‘/menu’)

• this.$router.replace({name:‘menu’})
  使用replace的话，不会添加一条新的记录

5、导航守卫

导航守卫：通过跳转时对跳转给予放行还是不放行，实现对导航的守卫。

1、*全局前置守卫beforeEach

可以在项目内创建多个全局前置守卫
这个是常使用的

router.beforeEach((to,from,next)=>{
  if(to.path==="/login"){
    next();
    return;
  }
  // 获取token
  const token=window.sessionStorage.getItem("token");
  if(!token){
    next('/login');
    return;
  }else{
    next();
  }
})

在守卫中，

• to 将要进入的目标路由对象
• from 当前正要离开的路由
• next 一定要调用next方法，
  next(false)中断当前的导航

2、全局后置钩子afterEach

可以创建多个全局后置钩子
不接受next函数，不会改变导航本身。
router.afterEach

3、beforeResolve全局解析守卫

可以创建多个

4、路由独享守卫

不可以创建多个
卸载路由配置数组项中，有next

5、beforeRouteEnter组件内的守卫

在组件内定义的路由导航守卫，（定义在created钩子同级的位置）

 beforeRouterEnter(to,from,next){
    next((vm)=>{

    })
  },

是支持给next传递回调的唯一守卫，回调的参数是当前vue实例。
在beforeRouterEnter中，不可以使用this来访问当前vue实例。
在组件创建时，不仅执行created钩子，也会执行beforeRouteEnter。

6、beforeRouteUpdate

在当前路由改变，但是该组件被复用时调用（嵌套组件的情况），在导航内可以访问this

7、beforeRouteLeave

导航离开该组件的对应路由时调用
这个离开守卫可以用来禁止用户在还未保存修改前离开。
该导航可以通过next(false)来取消导航。

6、命名路由

7、hash模式和history模式

1、hash模式

window对象提供了hashchange事件来监听hash值的改变，一旦url中的hash值发生改变，便触发该事件。
通过对location.hash赋值可以改变hash

2、history模式

HTML5中 History API提供，在不刷新整个页面的情况下修改站点的url，window对象提供了popstate事件来监听历史栈的改变，一旦历史栈的信息发生改变，就触发该事件。
但是调用history.pushState和history.replaceState方法不会触发该事件，只有在做出浏览器动作时才触发该事件。