0
点赞
收藏
分享

微信扫一扫

【Vue】学习笔记-路由

仲秋花似锦 2022-02-28 阅读 69

【Vue】学习笔记-路由

路由概述

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

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

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

vue create RouterProject

├─src │ └─assets │ │ └─logo.png │ └─components │ │ └─HelloWorld.vue │ views │ │ └─About.vue │ │ └─Home.vue │ └─App.vue │ └─main.js │ router.js

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 xzblog from '@/components/xzblog'
import xzvido from '@/components/xzvido'

routes: [
    {
      path: '/',
      name: "login"
      component: login
    },
    {
      path: '/video',
      name: 'video',
      component: video
    },
]

在这里插入图片描述
路由切换的时候主动获取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();   //正常访问
  }
})

常见错误总结

缺少导航守卫,没有登录的情况下还能访问其他页面
在这里插入图片描述
解决办法:
在这里插入图片描述

举报

相关推荐

0 条评论