【Vue】学习笔记-路由_努力的Wellington

irpas 02-07 8111

【Vue】学习笔记-路由路由概述创建包括路由模块的Vue项目配置router.js文件编程式导航导航守卫常见错误总结

路由概述

一个Web应用应该有多个页面，之前学习的Vue案例都是在一个页面完成的，通过路由，可以让应用在多个页面间跳转（严格的说Vue是单页面应用，所以跳转的不是其他页面，而是其他组件）。本文将会讲解路由的常用功能

创建包括路由模块的Vue项目

首先使用下面命令创建一个带路由的项目:

vue create RouterProject

views目录包括两个视图组件，用来展示两个菜单跳转的不同页面 router.js文件是路由配置文件，我们可以在其中设置更多的路由跳转。页面上方的Home和About是两个router-link标签，点击Home的时候，Home会用to这个属性跳转到首页的URL，再通过router文件找到URL对应的组件，把组件从Home.vue的位置显示出来（整体vue路由工作方式）

配置router.js文件

跳转页面单页面跳转使用router-link标签中的to属性进行跳转：

<router-link to="/" > </router-link>

总共在views文件中添加两个子路由，分别命名login.vue（登录）和video.vue（视频），然后在router文件夹中的index.js配置两个路由文件

import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import Blog from '../views/Blog.vue' import Video from '../views/Video.vue' import Login from '../views/Login.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { path:"/blog", name:"Blog", component:Blog }, { path:"/video", name:"Video", component:Video }, { path:"/login", name:"Login", component:Login } ]

路由切换的时候主动获取localStorage（登录用户名）的值而不是刷新页面获取。使用监听器watch，监听l路由路径 watch:{’$route.path’:function(){…}}

编程式导航

除了使用创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

router.push(...)

在注销按钮中，

methods: { logout(){ localStorage.clear(); this.$router.push("/login") //手动跳转login } }

当你点击时，这个方法会在内部调用，所以说，点击等同于调用 router.push(…)。

导航守卫 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... })

登录成功才能访问（首页，博客，视频），登录没成功只能访问登录页面

//导航守卫 router.beforeEach((to,from,next) =>{ if(to.path !=="/login"){ if(localStorage.getItem("usr")){ next(); //正常访问 }else{ next("/login") //重定向到login页面 } }else{ next(); //正常访问 } })

App.vue代码如下：

<template> <div id="app"> <div id="nav"> <router-link to="/">首页</router-link> | <router-link to="/blog">博客</router-link>| <router-link to="/video">视频</router-link>|| <span v-if="showUser">欢迎：{{username}}<button @click="logout">注销</button></span> </div> <router-view/> </div> </template> <script> export default { data() { return { username:localStorage.getItem("usr"), showUser:localStorage.getItem("usr") } },//监听器检测路由切换 watch:{ '$route.path':function(){ this.username = localStorage.getItem("usr") this.showUser = localStorage.getItem("usr") } }, methods: { logout(){ localStorage.clear(); this.$router.push("/login") //手动跳转login } }, } </script> 常见错误总结

缺少导航守卫，没有登录的情况下还能访问其他页面解决办法：