本文章由作者原创,共个人总结复习以及分享经验,欢迎指正
- 路由的安装
- 路由创建组件
- 路由简单使用
- 全局前置守卫
- 路由嵌套使用
- 其他
1.路由的安装
查阅vue-router官方文档,可知有:直接下载 / CDN,NPM,以及脚手架(vue cli)添加的方法,作者使用了npm的方法,在终端输入
npm install vue-router
作者选择了3.5.2版本,故在终端输入以下内容安装3.5.2版本路由
npm i [email protected] -S
文章后序内容也将以3.5.2版本路由作为基础
2.路由创建组件
-
在src文件夹下创建router文件夹,并在router文件夹内创建名为index.js的文件
-
在index.js文件中导入Vue和Vue-router
//导入Vue 导入Vue-router import Vue from 'vue' import VueRouter from 'vue-router'
-
安装vue-router插件
//安装Vue-router插件 Vue.use(VueRouter)
-
声明一个vue-router实例
//声明一个Vue-router实例 const router = new VueRouter({ routes: [] })
-
共享router
//共享router export default router
-
在main.js中导入index.js文件
// 导入路由模块 import router from '@/router/index.js'
-
在main.js文件实例Vue中添加
new Vue({ render: h => h(App), router: router }).$mount('#app')
3.路由简单使用
router-view组件:占位符,将即将渲染的组件与其匹配渲染到目标位置
<template>
<!-- 占位符 -->
<router-view></router-view>
</template>
1.在index.js文件中导入Login组件
import Login from '@/components/MyLogin.vue'
2.在index.js文件中的vue-router实例编写其对应的属性
//代表xxxxxxxxx/#/login哈希地址渲染Login组件
const router = new VueRouter({
routes: [
{ path: '/login', component: Login }
]
})
3.由于进入网站默认url:xxxxxxxx/#/,故在routes添加
//当检测到哈希地址为'/'时,自动跳转致'/login',以自动渲染Login组件
{ path: '/', redirect: '/login' }
redirect代表强制跳转至某哈希地址
4.全局前置守卫
1.为Login组件中的登录按钮绑定一个点击事件
<button type="button" @click="login">登录</button>
2.将登录信息token储存在本地储存空间,作为已登录的凭据
methods: {
login() {
if (this.username === 'admin' && this.password === '666666') {
// 登录成功
// 1. 存储 token
localStorage.setItem('token', 'Bearer xxxx')
// 2. 跳转到后台主页
this.$router.push('/home')
} else {
// 登录失败
localStorage.removeItem('token')
}
}
}
此处若登陆成功,则记录token信息,并且将哈希地址跳转至/home,若失败则移除token信息
3.封装需要登录才能查看的哈希地址,并共享
在router文件夹内创建pathArr.js文件
在内写入想封装的哈希地址
export default ['/home', '/home/users', '/home/rights']
4.在index.js中导入封装的哈希地址
import pathArr from '@/router/pathArr.js'
5.使用beforeEach函数创建全局前置守卫
router.beforeEach(function(to, from, next) {
if (pathArr.indexOf(to.path) !== -1) {
const token = localStorage.getItem('token')
if (token) {
next()
} else {
next('/login')
}
} else {
next()
}
})
其中beforeEach中需要写function方法,其中形参to代表着要跳转的哈希地址,from代表从哪里跳转的哈希地址,next代表着通行。若要跳转的地址属于封装的哈希地址则检查本地储存空间是否存在'token',若存在则next()通行,不存在则强制跳转至'/login';若要跳转的哈希地址不属于封装的哈希地址,则直接next()通行
6.在home组件中的退出按钮绑定点击事件
<button type="button" @click="logout">退出登录</button>
methods: {
logout() {
// 1. 清空 token
localStorage.removeItem('token')
// 2. 跳转到登录页面
this.$router.push('/login')
}
}
清空token,跳转至登陆页面,实现了页面返回至未登录的状态
5.路由嵌套使用
1.同样的,创建<router-view>组件,提供渲染占位
<div>
<router-view></router-view>
</div>
2.使用<router-link>组件,提供链接跳转哈希地址(注意,此组件会自动渲染为<a>组件)
<ul>
<li>
<router-link to="/home/users">用户管理</router-link>
</li>
<li>
<router-link to="/home/rights">权限管理</router-link>
</li>
<li>
<router-link to="/home/goods">商品管理</router-link>
</li>
<li>
<router-link to="/home/orders">订单管理</router-link>
</li>
<li>
<router-link to="/home/settings">系统设置</router-link>
</li>
</ul>
3.在index的router实例中创建一个属性的孩子属性
{
path: '/home',
component: Home,
redirect: '/home/users',
children: [
{ path: 'users', component: Users },
{ path: 'rights', component: Rights },
{ path: 'goods', component: Goods },
{ path: 'orders', component: Orders },
{ path: 'settings', component: Settings },
]
}
其中children中的path:' '中的哈希地址不要写'/',
4.实现后退功能
<!-- 在后退按钮上绑定一个点击事件,返回上一个历史访问 -->
<button type="button" @click="$router.back()">后退</button>
5.实现path中的动态哈希地址
在要完成图中的操作,点击详情跳转至每一个详细介绍界面,如果每一个行都对应一个哈希地址,当行数超量,那么将造成了代码的臃肿 ,故我们使用动态哈希地址,以下为方法:
-
对超链接绑定一个点击事件(prevent阻止跳转,但执行后面的方法)
<a href="#" @click.prevent="gotoDetail(item.id)">详情</a>
-
编写方法(注意:这里的'+'不可以用:代替)
methods: { gotoDetail(id) { this.$router.push('/home/userinfo/' + id) }
-
在router实例中如下编写(注意,这里id前的:即为动态绑定),实现了简单的复写
const router = new VueRouter({ routes: [ { path: '/home', component: Home, redirect: '/home/users', children: [ { path: 'users', component: Users }, { path: 'rights', component: Rights }, { path: 'goods', component: Goods }, { path: 'orders', component: Orders }, { path: 'settings', component: Settings }, // 用户详情页的路由规则 { path: 'userinfo/:id', component: UserDetail } ] } ] })
6.其他
此项目来源于网络黑马程序员,其项目文件构成如下
b站有相关资源与学习视频,本文章原创,仅供分享学习总结以及复习, 如有错误欢迎指正