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

最新推荐文章于 2024-08-02 18:09:38 发布

我是小白菜鸟

最新推荐文章于 2024-08-02 18:09:38 发布

阅读量302

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_42302014/article/details/121385688

版权

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

摘要由CSDN通过智能技术生成

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.