Vue-router使用(配置路径、路由跳转、相关API、多级路由、路由守卫，两种工作模式)

安装

cnpm install -S vue-router

配置路径

创建文件：src/router/index.js

// index.js
import VueRouter from 'vue-router' // 导入router
import LoginView from '@/views/Login.vue' // 导入组件

Vue.use(VueRouter) // 使用插件

// 创建路由
const routes = [
  {
    path: '/login',	// 组件路径
    name: 'login',	// 组件名
    component: LoginView	// 组件实例
  },
]

// 创建router实例 以及设置配置
const router = new VueRouter({
  mode: 'history', // 路由模式 history不带#，hash带#
  base: process.env.BASE_URL, // 基础url为BASH_URL
  routes // 引入routes变量存放路由信息
})

main.js 中使用

// main.js
import router from './router' // 引入

new Vue({
  router, // 装载router
  store,
  render: h => h(App)
}).$mount('#app')

路由跳转

路由跳转参数根据组件配置的路由而定：

不携带参数跳转

// js跳转
this.$router.push('/login')	// 根据路径
this.$router.push('login')	// 根据组件名
// 对象写法
this.$router.push({name:'login'})
this.$router.push({path:'/login'})

// html跳转
<router-link to="/login">
	<button>跳转到login</button>
</router-link>
<router-link to="login">
	<button>跳转到login</button>
</router-link>
// 对象写法
<router-link :to="{name:'login'}">
	<button>跳转到login</button>
</router-link>
<router-link :to="{path:'/login'}">
	<button>跳转到login</button>
</router-link>

携带参数跳转

?形式携带参数

// js跳转
this.$router.push('/login?id=3') // 根据路径
// 对象写法
this.$router.push({path:'/home',query:{'id':'3'}})


// html跳转
<router-link to="/home?id=3">
    <button>跳转到home</button>
</router-link>
// 对象写法
<router-link :to="{name:'home',query:{'id':'3'}}">
    <button>跳转到home</button>
</router-link>

地址中直接携带参数

// 在路由配置中添加:id,id可以是任何参数
const routes = [
  {
    path: '/home/:id',
    name: 'home',
    component: HomeView
  },
]

// js跳转
this.$router.push('/home/3') // 根据路径
// 对象写法
this.$router.push({name:'home',params:{'id':'3'}})


// html跳转
<router-link to="/home/3">
    <button>跳转到home</button>
</router-link>
// 对象写法
<router-link :to="{name:'home',params:{'id':'3'}}">
    <button>跳转到home</button>
</router-link>

相关API

• this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
• this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
• this.$router.back(): 请求(返回)上一个记录路由
• this.$router.go(-1): 请求(返回)上一个记录路由
• this.$router.go(1): 请求下一个记录路由

多级路由

需求：在同一个html页面中，左边有两个跳转链接负责切换组件，右边展示不同的组件，仅以切换路由为示例

// 子组件1
<script>
export default {
  name:'sun1'
}
</script>

<template>
<div>
  我是sun1
</div>
</template>

// 子组件2
<script>
export default {
  name:'sun1'
}
</script>

<template>
<div>
  我是sun2
</div>
</template>

<script>
export default {
  name: 'Index',
}
</script>

<template>
  <div>
    // 切换组件
    <div class="left">
      <router-link to="/index/sun1">
        <p>子路由1</p>
      </router-link>
      <router-link to="/index/sun2">
        <p>子路由2</p>
      </router-link>
    </div>

	// 展示区
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

// 注册路由
import Index from '@/components/index.vue'
import sun1 from '@/components/sun1.vue'
import sun2 from '@/components/sun2.vue'

const routes = [{
  path: '/index',
  name: 'index',
  component: Index,
  children:[
    {
      path:'sun1',
      component:sun1
    },
    {
      path:'sun2',
      component:sun2
    }
  ]
},]

路由守卫

路由守卫会在用户访问某个路由之前提前进行判断检查和各种操作，确保用户已符合规定的方式访问路由

1. 全局前置守卫 beforeEach：在路由导航前执行，用于权限验证、登录状态检查等
2. 全局解析守卫 beforeResolve：在导航被确认之前，解析组件时被调用
3. 全局后置守卫 afterEach：在路由导航后执行，用于页面访问记录、页面埋点等
4. 路由独享守卫：在单个路由配置中定义的守卫，仅对该路由生效
5. 组件内守卫：在组件内部定义的守卫，用于监视组件的生命周期和路由变化

全局前置守卫示例：

// src/router/index.js
router.beforeEach((to,from,next)=>{
  console.log('我是前置路由',to,from)
  if (localStorage.getItem('name')) { //判断是否需要鉴权
    next()
  } else {
    alert('未查询到token，无权查看')
  }
})

此时访问路由不会返回任何东西，并触发函数

当添加token后便能正常访问

两种工作模式

hash

• 优势
  • 兼容性好：支持所有浏览器
  • 配置简单：无需服务器额外配置，只需前端配置模式
  • 易于部署：可以直接部署在任何HTTP服务器上
• 劣势
  • URL不美观：所有URL中都会带有#符号
  • SEO不友好：不利于网站内容被搜索引擎收录

history

• 优势
  • URL美观：URL中不带#符号
  • 历史记录管理：可以通过浏览器的 history API 进行前进后退等操作
  • SEO友好：更符合搜索引擎优化的要求
• 劣势
  • 服务器端配置：需要服务器进行额外配置，确保在不同路由下都返回同一个HTLM，以避免出现404错误
  • 部署复杂性：相比于hash模式，需要额外部署配置，以避免出现404错误

配置

src/router/index.js

// Vue2默认history模式
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

浏览器输入：http://localhost:8080/#/home/其他与history基本没有区别