Vue项目-路由demo

绝地灬酷狼 2023-07-07 15:00 143阅读 0赞

# 创建项目 #

[前端项目准备（使用vue脚手架创建）][vue]

# 项目准备 #

## 删除不要的组件 ##

*  删除views文件夹
 *  删除compoents目录下的所有文件

## 修改APP.vue ##

<template>
      <div id="app">
        
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default { 
      name: 'app'
    }
    </script>
    
    <style>
    </style>

## 创建登录组件 ##

在compoents目录下，新建Login.vue文件

<template>
      <div>登录组件</div>
    </template>
    
    <script>
    export default { }
    </script>
    
    <style lang="less" scoped>
    </style>

## 设置路由 ##

修改router目录下index.js文件

import Vue from 'vue'
    import VueRouter from 'vue-router'
    // 导入登录组件
    import Login from '../components/Login.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      // 根路径重定向到登录
      { 
        path: '/',
        redirect: '/login'
      },
      // 登录
      { 
        path: '/login',
        component: Login
      }
    ]
    
    const router = new VueRouter({ 
      routes
    })
    
    export default router

## 启动项目 ##

npm run serve

页面显示登录组件即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70]

[vue]: https://blog.csdn.net/qq_28988969/article/details/104472205
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200224111032435.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，143人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue】使用vue-cli搭建SPA项目的路由，嵌套路由

一、SPA项目的构建 1、前期准备 > 我们的前期的准备是[搭建好Node.js][Node.js],测试： > > node -v > npm

Myth丶恋晨/ 2024年03月02日 09:40/ 0 赞/ 88 阅读

相关 Vue项目-路由demo

创建项目 [前端项目准备（使用vue脚手架创建）][vue] 项目准备删除不要的组件删除views文件夹删除compoents目录下的所有

绝地灬酷狼/ 2023年07月07日 15:00/ 0 赞/ 144 阅读

相关 vue项目路由权鉴（单个路由）

beforeEnter(to,from,next){ if(sessionStorage.getItem("token")){

妖狐艹你老母/ 2023年01月07日 14:25/ 0 赞/ 152 阅读

相关 VUE_vue动态路由，引入所有路由，vue路由模块化

require.context 主要使用require.context实现前端工程化动他引入文件 require.context(directory, useSubdir

蔚落/ 2022年11月04日 00:52/ 0 赞/ 335 阅读

相关 vue 路由、嵌套路由、动态路由

简介路由就是一套映射规则，当url中的哈希值（\hash）改变时，路由会根据制定好的规则，展示对应的视图组件。 vue中的路由路径分为：相对路径（不带 ‘/’，会拼接

朴灿烈づ我的快乐病毒、/ 2022年10月29日 13:28/ 0 赞/ 477 阅读

相关 vue 路由

[https://router.vuejs.org/zh-cn/][https_router.vuejs.org_zh-cn] 用 Vue.js + vue-router 创

蔚落/ 2022年06月07日 10:54/ 0 赞/ 334 阅读

相关 vue路由

一、App.vue中的<router-view></router-view> 凡是定义到index.js中的组件，都会被渲染到App.vue中二、路由跳转和a标签的

秒速五厘米/ 2022年03月08日 11:24/ 0 赞/ 434 阅读

相关 Vue路由

vue-router 基本使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

蔚落/ 2022年02月24日 02:56/ 0 赞/ 396 阅读

相关 vue - 项目之路由封装

1、封装的路由代码块（LazyRouter文件） const lazyRouter={ routes:[], ad

墨蓝/ 2021年09月29日 09:36/ 0 赞/ 521 阅读

相关 vue路由

vue路由一、vue关于路由的5个重要对象 > 1、router-view：类似angular中的router-outlet，router-view会不断的改

浅浅的花香味﹌/ 2021年09月15日 14:48/ 0 赞/ 585 阅读