多个vue项目之间跳转_Vue六,路由,ElementUI

本文详细介绍了如何在Vue项目中配置路由vue-router,包括下载安装、初始化路由对象、注册路由信息以及在视图中显示内容。同时讲解了路由对象的页面跳转方法如`router-link`和`this.$router.push`,并阐述了参数传递的方式。此外,还介绍了ElementUI的快速安装和在项目中的应用,帮助开发者提升前端开发效率。
摘要由CSDN通过智能技术生成

内容大纲

  • 安装路由
  • 配置路由
  • 路由对象router:页面跳转,传递参数
  • ElementUI
知乎视频​www.zhihu.com

前端项目

笔记

为什么要在linex中开发?
1.公司服务器是linex,如果也用linex开发,会减少bug(linex权限很多,严格)
2.进程,线程管理和window,mac中有差异

2. 客户端项目搭建

2.1 创建项目目录

cd 项目目录[荏苒资讯]
vue init webpack renran

例如,我要把项目保存在桌面下 ~/Desktop/renran,可以如下操作:

cd Desktop/renran
vue init webpack renran_pc

打开项目已经,在pycharm的终端下运行vue项目,查看效果。

上面的操作步骤,等同于执行了下面这句命令。

npm run dev

接下来,我们根据终端上效果显示的对应地址来访问项目(如果有多个vue项目在运行,8080端口被占据了,服务器会自动改端口,所以根据自己实际在操作中看到的地址来访问。)

访问:http://localost:8080

2.2 初始化项目

清除默认的HelloWorld.vue组件和APP.vue中的默认模板代码和默认css样式

71cce2e663d026d5522e81c34f8fd842.png
<template>
  <div id="app">

  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>

</style>

接下来,我们可以查看效果了,一张白纸~

18a856ca154db427732abf491f99a78e.png

2.3 安装路由vue-router

官方文档:https://router.vuejs.org/zh/

2.3.1 下载安装路由组件

npm i vue-router -S
npm install vue-router --save

2.3.2 配置路由

2.3.2.1 初始化路由对象

在src目录下创建routes路由目录,在router目录下创建index.js路由文件

index.js路由文件中,编写初始化路由对象的代码 .

import Vue from "vue";
import Router from "vue-router";


// 注册路由组件
Vue.use(Router);

// 导入组件
// 在vue中 @ 代表src目录的路径

import Home from "@/components/Home"
import Login from "@/components/Login"
import Goods from "../components/Goods";
import Reg from "@/components/Reg";
import User from "../components/User";
import Show from "../components/Show";
import TodoList from "../components/TodoList";

// 创建实例化路由对象,编写路由列表
export default new Router( {
    
    mode:"history",  // 路由显示模式,默认hash,地址栏上默认带#,一般用history,history不带#
    routes:[
    {
    
      path:"/home",  // 访问url的地址,字符串
      name:"Home",  // 路由别名,可写可不屑,字符串
      component: Home,  // 访问url地址对应的组件,变量
    },
    {
    
      path: "/Login",
      component: Login,
      name:"Login",
    },
    {
    
      path: "/Reg",
      component: Reg,
      name: "Reg",
    },
    {
    
      path: "/Goods",
      component: Goods,
      name: "Goods",
    },
    {
    
      path: "/User/:name/:id",
      component: User,
      name: "User"
    },
    {
    
      path: "/Show",
      component: Show,
    },
    {
    
      path: "/Todolist",
      component: TodoList,
    },
]
})

2.3.2.2 注册路由信息

打开main.js文件,把router路由规

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值