vue-router官方参考文档地址
https://router.vuejs.org/zh/api/#router-link
安装vue-router依赖
查看依赖是否存在,如下已存在,一般初始化的项目都已经安装了vue-router依赖
D:\node\myDemo>npm list vue-router
mydemo@1.0.0 D:\node\myDemo
`-- vue-router@3.3.4
如果依赖不存在 , 执行依赖安装指令
D:\node\myDemo>npm install vue-router -S
全局路由配置
- src目录下创建router文件夹,方便管理路由相关配置;
- router文件夹下创建 staticRoutes.js ,用于单独存放静态路由直接引入;
router/staticRoutes.js 文件
const staticRoutes = [{
path: '/',
name: 'HelloWord',
component:()=>import('../views/HelloWorld.vue')
},{
path: '/users',
name: 'Users',
component:()=>import('../views/UsersList.vue')
meta:{
keepAlive: false,
title: '用户管理',
}
},{
path: '/roles',
name: 'Roles',
component:()=>import('../views/RolesList.vue'),
meta: {
keepAlive: true,
title: '权限管理'
}
}
]
export default staticRoutes
单个route对象配置全部参数参考如下:
Router实例化
以下示例中引入的加载进度条组件,所以需要单独安装下,如下:
D:\node\myDemo>cnpm install nprogress -S
router/index.js
import Vue form 'vue'
import Router from 'vue-router'
import NProgress from 'nprogress' // 加载进度组件
import 'nprogress/nprogress.css'
import staticRoutes from './staticRoutes.js'
NProgress.configure({ showSpinner: false });
Vue.use(Router)
const route = new Router({
routes: staticRoutes,
mode: 'hash', // 可选参数 hash || history || abstract
base: '/', // 应用的基础路径
scrollBehavior(to,form,savedPosition) {
// return 期望滚动到哪个位置
if(savedPosition) {
return savedPosition
} else {
return {x:0,y:0}
}
}
});
// 全局前置守卫(ps: 一般在前置守卫做一些权限判断、页面跳转、或者进度条加载、标题修改等业务操作)
route.beforeEach((to,form,next)=>{
// 开启进度条
NProgress.start();
// 设置标题
if (to.meta.title) {
document.title = to.meta.title;
}
next();
});
// 全局后置钩子
route.afterEach((to,form)=> {
// 关闭进度条
NProgress.done();
});
export default route
组件中应用路由
- App.vue 文件
<template>
<div id="app" class="sys-app">
<router-view></router-view>
</div>
</template>
- main.js 文件
import Vue form 'vue'
import App form './App'
import router form './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: {App},
template: '<App/>'
})
- 浏览器访问页面查看效果
localhost:8080/#
localhost:8080/#/users
localhost:8080/#/roles
补充内容:路由常用跳转方法
- 导航到不同的url地址,向history栈里添加一个新的记录
this.$router.push({location, onComplete? onAbort? }); - 后退一步
this.$router.back(); - 指定前进/回退的步数
this. r o u t e r . g o ( − 1 ) t h i s . router.go(-1) this. router.go(−1)this.router.go(2) - 前进一步
this.$router.forward() - 导航到不同url,替换history栈中的当前记录
this.$router.replace({location, onComplete? onAbort? });
补充内容:路由对象属性说明
- $router.path // 字符串,对应当前路由的路径,总是解析为绝对路径;
- $router.params // 路由参数
- $router.query // URL 查询参数
- $router.hash // 当前路由的hash值(带#)如果没有hash值,则为空字符串
- $router.fullPath // 完成解析后的Url, 包括查询参数和hash的完整路径
- $router.matched //一个数组,包含当前路由的所有嵌套路径片段的路由记录。路由记录就是routes配置数据组中的对象副本(还有在children数组)。
- $router.name // 当前路由的名称,如果有的话
- $router.redirectedFrom // 如果存在重定向, 即为重定向来源的路由的名字