vue-router路由的应用篇

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

全局路由配置

1. src目录下创建router文件夹，方便管理路由相关配置；
2. 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

组件中应用路由

1. App.vue 文件

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

2. 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.$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 // 如果存在重定向, 即为重定向来源的路由的名字