vue-router
【一】Vue-router介绍
vue-router是vue的页面的链接路径管理系统。由于Vue开发时对路由支持不足，于是官方补充了vue-router插件。vue的单页面应用(SPA)是基于路由和组件的，路由用于设定访问路径，并且将路径和组件映射起来。
传统的页面应用是用一些超链接来实现页面的切换和调转的。在vue-router的单页面应用中，则是路径之间的切换，实际上就是组件的切换。
【二】安装
【1】安装命令
npm install vue-router
【2】创建组件
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能，用vue-cli生产了我们的项目结构，src文件目录下会有一个router文件夹，此处就是编写路由组件的地方。在src/router/index.js，这个文件就是路由的核心文件：
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [ //配置路由，这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'Hello', //路由名称，
component: Hello //对应的组件模板
}，{
path:'/hi',
component:Hi,
children:[ //子路由,嵌套路由 （此处偷个懒，免得单独再列一点）
{path:'/',component:Hi},
{path:'hi1',component:Hi1},
{path:'hi2',component:Hi2},
]
}
]
})
【3】全局组件
-html：全局组件：
-<router-view></router-view> # 显示页面组件
-<router-link></router-link> # 路由跳转【相当于a标签】
-js中：
this.$router # 路由对象，路由跳转
this.$route # 当前路由对象，跳转携带数据，从这里取出来
【三】简单路由跳转
【1】通过组件跳转
<el-button @click="handleAbout">按钮跳关于</el-button>
【2】通过路由js跳转
<el-button @click="handleAbout">按钮跳关于</el-button>
<script>
export default {
name: 'HomeView',
methods: {
handleAbout() {
this.$router.push('/about')
}
</script>
【四】高级路由跳转
【1】路由js跳转--传对象
// 对象里面放path
handleAbout2(){
this.$router.push({
path:'/about'
})
}
// 根据别名跳转 name
handleAbout2(){
this.$router.push({
name:'about'
})
}
},
// 携带数据 在?后面的数据
handleAbout2() {
this.$router.push({
name: 'about',
query: {name: this.name} //数据会携带在地址栏中问号？后面 http://192.168.1.24:8080/about?name=green
})
}
},
// 获取携带的数据,通过this.$route.[数据键名]，$route是当前路由对象
// 在about页面组件中
data(){
return{
name : ''
}
},
created() {
this.name = this.$route.query.name
// 这样就能拿到数据
},
// 携带数据在地址栏中 不是?后面的参数
// 首先需要在路由组件中绑定
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about/:id', // 用冒号:绑定变量 之后就需要在地址栏后面跟一个数据才能访问 就像django路由层的转换器
name: 'about',
},
//
// 给跳转按钮配置 params属性
handleAbout2() {
this.$router.push({
name: 'about',
params: {id:this.id}
})
// 取出params属性值
export default {
name: 'about',
data() {
return {
id: ''
}
},
created() {
this.id = this.$route.params.id // 通过params.属性名取值
},
}
【2】通过标签跳转--传对象
可以用在to前面价格冒号将其绑定到某个对象上，那么就可以这个对象里面定义name，query，params等
<router-link :to="{}">点我跳转关于页面关于</router-link>
【五】路由嵌套--子路由
常见的侧边栏样式就是用路由嵌套来实现的，点击左边的按钮，左边的内容不变，右边主题内容变化
/user/johnny/profile /user/johnny/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
【1】配置子路由
const routes = [
{
path: '/demo',
name: 'demo',
component: RouterDemoView,
// 多级路由 用children属性配置，他是一个数组套对象
// 需要有几个子路由就写几个对象
children: [
{ // path是子路由的路径
path: 'home', // 此处不能写成/home,
// component是子路由用到的组件
component: HomeView2
},
{
path: 'good', // 此处不能写成/good,
component: GoodsView
},
{
path: 'order', // 此处不能写成/order,
component: OrdersView
}
]
}
]
【2】写路由子组件
略...
【3】配置路由跳转
<template>
<div id="demo">
<h1>路由嵌套</h1>
<router-link to="/demo/home">
<el-button>首页</el-button>
</router-link>
<br>
<router-link to="/demo/good">
<el-button>商品</el-button>
</router-link>
<br>
<router-link to="/demo/order">
<el-button>订单</el-button>
</router-link>
// 需要用 router-view标签来渲染子组件
<router-view></router-view>
</div>
</template>
【六】相关api
【1】VueRouter
VueRouter： VueRouter 类用于创建一个新的路由实例。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
// 配置路由
]
})
【2】routes
routes： 路由配置数组，用于定义路由映射关系。
const router = new VueRouter({
routes: [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
})
【3】router-link
router-link： 用于在 Vue 组件中声明式导航到路由的组件。
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
【4】router-view
router-view： 用于渲染匹配的路由组件。
<router-view></router-view>
【5】跳转
// push： 在编程式导航中使用，将新路由推送到历史记录栈中。
router.push('/home')
// replace： 在编程式导航中使用，替换当前路由而不是添加新条目。
router.replace('/home')
// go、back、forward： 控制浏览器历史记录的导航。
router.go(-1) // 后退一页
router.back() // 后退一页
router.forward() // 前进一页
【6】守卫
// beforeEach： 路由跳转前的全局守卫，可以用于执行某些验证或者拦截。
router.beforeEach((to, from, next) => {
// ...
})
// beforeResolve： 在导航被确认之前，全局守卫。
router.beforeResolve((to, from, next) => {
// ...
})
// afterEach： 导航成功完成后的全局钩子。
router.afterEach((to, from) => {
// ...
})
【七】路由守卫
当进行路由跳转的时候可能需要在路由跳转的不同阶段执行一些列逻辑或者操作，比如路由跳转前的权限校验，在导航被确认之前执行某些操作，以及在导航成功之后执行一些操作
为了实现这些需求，Vue Router 提供了一些全局的导航守卫，其中就包括 beforeEach、beforeResolve 和 afterEach 这三个 API。
【1】beforeEach
beforeEach 是一个全局的导航守卫，会在路由跳转之前被调用。您可以使用它来进行权限验证、路由拦截等操作。该方法接收三个参数：
to：即将跳转的目标路由对象；from：当前导航正要离开的路由对象；next：一个函数，用于告知 Vue Router 是否继续导航。调用next()表示继续导航，而调用next(false)或者传递一个路由路径表示取消导航，并将用户重定向到另一个路由。
下面是一个示例，演示如何在 beforeEach 中进行路由权限验证：
router.beforeEach((to, from, next) => {
// 模拟权限验证逻辑
const isAuthenticated = checkAuth() // 假设有一个函数用于检查用户是否已经登录
if (to.meta.requiresAuth && !isAuthenticated) {
// 如果路由需要登录权限而用户未登录，则重定向到登录页
next('/login')
} else {
// 其他情况下继续导航
next()
}
})
【2】beforeResolve
beforeResolve 导航守卫与 beforeEach 类似，但是它会在路由导航被确认之前被调用，也就是在 beforeEach 和路由组件内守卫之后、导航被确认之前调用。这意味着在 beforeResolve 中的操作是在路由组件被解析之后，但在它们被渲染之前执行。
beforeResolve 方法的参数与 beforeEach 相同，它们的用法也非常类似。一般情况下，您可以使用 beforeEach 就可以满足大多数需求，但如果需要在组件解析之后执行某些操作，可以考虑使用 beforeResolve。
【3】afterEach
afterEach 是一个全局的导航守卫，会在路由成功跳转之后被调用，不管是从哪个路由跳转到哪个路由，都会执行 afterEach 中的逻辑。它接收两个参数：
to：即将跳转的目标路由对象；from：当前导航离开的路由对象。
与 beforeEach 不同，afterEach 中不需要调用 next() 函数。您可以在 afterEach 中执行一些与导航完成后的清理工作、日志记录等操作
router.afterEach((to, from) => {
// 在控制台中记录当前导航的信息
console.log(`Navigated from ${from.path} to ${to.path}`)
})
