【Vue】学习笔记-路由
路由概述
一个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>
常见错误总结
缺少导航守卫,没有登录的情况下还能访问其他页面
解决办法: