Web前端vue必做笔记之一:路由功能

最新推荐文章于 2025-06-01 10:03:04 发布

我是小白菜鸟

最新推荐文章于 2025-06-01 10:03:04 发布

阅读量349

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_42302014/article/details/121385688

本文为Web前端开发者提供了一份关于Vue.js路由功能的详细笔记，涵盖了如何配置路由index.js，创建登录页组件以及在App.vue页面的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web前端vue必做笔记之一:路由功能

在这里插入图片描述
配置路由index.js

import { createRouter, createWebHistory } 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'

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
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

//导航守卫
router.beforeEach( (to, from, next) => {
    if(to.path !== '/login'){
        if(localStorage.getItem('usr')){
            next();  //正常访问
        }else{
        
            next('/login')
        }
    }else{
       next();
    }    

})

export default router

登录页组件

<template>
     <div>
          <form @submit.prevent="doLogin">
               <input type="text" v-model="username">
               <input type="text">
               <button>登录</button>
          </form>
     </div>
</template>

<script>
 export default {
     data(){
         return {
              username:''
         }
     },
       methods:{
            doLogin(){
                   console.log(this.username);
                   //本地存储
                   localStorage.setItem("usr",this.username);
                    
                   this.$router.push("/"); 
                
            }
       }
 }
</script>

App.vue页面

<template>
  <div id="nav">
    <router-link to="/">Home</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/>
</template>

<script>
 export default {
        data(){
            return {
                    username:localStorage.getItem('usr'),
                    showUser:localStorage.getItem('usr')
                  
            }
        },
        watch:{
            //使用监听器监听路由变化 , 这样就不用手动刷新，就可以实现登录显示用户名功能
            '$route.path':function(){
                // console.log("hello");
                this.username = localStorage.getItem('usr')
                this.showUser = localStorage.getItem('usr')
            }
        },
        methods:{
           //注销
           logout(){
                //清空本地存储
                localStorage.clear();
                this.$router.push("/login")
           }
        }

 }
</script>