Vue Router

组件路由 vue router 是 Vue.js 官方的路由管理器。它和Vue.js的核心深度集成，让构建 单页面应用变得易如反掌。 安装 vue-router 是一个插件包，所以我们还是需要用npm来进行安装的。 打开命令行工具，进入你的项目目录，输入下面命令。 npm i vue-router@3.5.3 搭建步骤:

1. 创建router目录 创建index.js 文件,在其中配置路由 import Vue from 'vue'; import router from 'vue-router'; /* 导入路由 */ import login from '../views/login'; /* 导入其他组件 */ import content from '../components/content'; /* 导入其他组件 */ Vue.use(router) /* 定义组件路由 */ var rout = new router({ routes: [ { path: '/index', name: 'index', component: index }, { path: '/content', component: content } ] }); //导出路由对象 export default rout;

2.使用路由 首页 内容

3.在main.js 中配置路由 import router from './router/index.js' Vue.use(router); new Vue({ el: '#app', router, render: h => h(App) })

4.路由导航守卫 为路由对象，添加beforeBach导航守卫 to-将要访问的页面地址,from-从哪个页面访问的,next-放行函数 rout.beforeEach((to,from,next)=>{ if(to.path=='/login'){如果用户访问的登录页，直接放行 return next(); }else{ var token = window.sessionStorage.getItem("token"); if(token==null){ return next("/login"); }else{ next(); } } })

5.路由嵌套 { path: '/main', component: Main, //路由嵌套 在main下面的嵌套子路由 children:[ { path:"/admin", component:Admin } ] } 6.路由传参 用户 目标组件获取地址参数 this.$route.query.num