Vue路由插件使用 -- vue-router

Vue路由插件使用 -- vue-router

路由插件可以在创建项目时就在手动配置时下载安装。

如果没有创建时没有下载，那也可以用npm或cnpm安装。

npm install vue-router@4

路由设置与路由分发

router/index.js设置路由

创建vue项目时如果安装了router模块，那么在src中会自动生成router文件夹，其中的index.js帮助我们初始化引入了插件，并引用到了main.js中。

import HomeView from '../views/HomeView.vue'

const routes = [
    {
        path: '/',  // 路由，/表示根路径
        name: 'home',  // 在通过对象跳转时会用到
        component: HomeView  // 可以先导入视图，然后注册
    },
    {
        path: '/login',
        name: 'login',
        component: () => import( '../views/LoginView.vue')  
        // 也可以直接通过箭头函数导入视图组件
    },
]

路由分发

在App.vue的模板中写入分发路由的标签<router-view/>即可：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

一般来说，app只需要加这一个路由组件即可，因为每个视图界面可能完全不一样，没有共有元素，app中的标签肯定是每个界面都会展示的。

基本路由跳转

点击跳转的两种方式

• js控制

  //  @click="handleClick"
  handleClick(){
      // 路由跳转方式
      this.$router.push('/login')  // push(path) path对应路由配置中的path
      // 对象跳转方式
      this.$router.push({
          name:'/login',
           // 如果要携带数据的话，以下是携带数据的两种方式
          query:{name:'leethon',age:19},
          params:{id:2}
      })
  }
  
  

• 标签控制

  <router-link to="/login">
      <button>点我跳转到home页面</button>
  </router-link>
  

携带数据跳转路由的两种方式

• 通过查询？形式携带 /book/?id=1

  // /book/?id=1
  // 在对应的视图组件中，我们可以通过.$route.query获取
  this.$route.query.id
  

• 通过动态路由捕获 /book/1/

  // 在对应的视图组件中，我们可以通过.$route.params获取
  this.$route.params.id
  // 这种需要在路由配置中对路径做处理，“:”表示捕获
  path: '/book/:id'
  

区分$router和$route

this.$router：new VueRoute实例，可以实现路由的跳转

this.$route：是当前路由对象，内部有传入的参数

使用对象跳转的两种方式

• js代码

  this.$router.push({
      name: 'login',
  	/*？携带的数据*/
      query: {name: 'leethon', age: 19},
      /*动态路由携带的数据*/
      params: {id: 2}
  })
  

  以上对象会自动将路由转换为login/2/?name=leethon&age=19

• 标签跳转

  <router-link :to="{name: 'login', query: {name: 'leethon'}, params: {id: 2}}">
      <button>点我跳转到home页面</button>
  </router-link>
  

  注意to中默认不能传对象，使用v-bind写法后可以绑定对象

路由守卫

这里简单介绍一下：全局前置路由守卫

router.beforeEach((to, from, next) => {}

• to：去哪个路由对象，route对象，包含name等属性
• from：从哪个路由来，route对象
• next：函数，执行next()则跳转到原本要去的路由

router.beforeEach((to, from, next) => {
    if (to.name==='login'){
        next()  // 放行
    }else{
        let jwt_token = JSON.parse(localStorage.getItem('Authorization'))
        if (jwt_token){
            // 这里暂时没有向后端发校验，只要有，我就让它访问
            next()  // 如果内部不传参数，那么去原本的to
        }else{
            alert('您还没有登录！')
            next({name:'login'})  // 内部传入to对象，含name，query，params属性的对象
        }
    }
})