Vue (学习第四部 前端项目搭建流程 )

目录

客户端项目搭建

　　创建项目目录

　　初始化项目

　　安装路由 Vue-router

　　　　下载安装路由组件

　　　　配置路由

　　　　　　初始化路由对象

　　　　　　注册路由信息

　　　　　　在视图函数中显示路由对应的内容

　　　　路由对象提供的操作

　　　　　　页面跳转

　　　　　　　　router_link 标签

　　　　　　　　this.$router.push() 跳转

　　　　　　参数传递

　　　　　　　　获取查询字符串

　　　　　　　　获取路由参数

　　　　　　

ElementUI

　　快速安装ElementUI

　　配置ElementUI到项目中

首页

　　创建首页组件

　　　　创建首页对应的路由

客户端项目搭建

　　http://localost:8080

　　https://router.vuejs.org/zh/

　　　　下载安装路由组件

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

　　　　配置路由

　　　　　　 } } } script> <style scoped> style>

　　　　　　参数传递

vue-router提供了 this.$route, 可以让我们接收来自其他页面的附带参数. 参数有两种:

1. 查询字符串( query string ) ,就是地址栏上面 ? 号后面的参数,

例如:  http://localhost:8008/user?

name+ xiaoming&pwd =123 ,这里

name= xiaoming&骗我的=123 就是查询字符串参数.

2.  路由参数( router params ),就是地址栏上面的路由路径的一部分,

例如: http://localhost:8080/user/300/xiaoming,此时,300 属于路由路径的一部分,这个300 就是路由参数,当然,xiaoming,或者user

也可以理解是路由参数,就是看我们的页面中是否需要接受而已.

　　　　　　　　--> <router-link :to="`/user?name=${name}&pwd=${pwd}`">查询字符串参数router-link> <router-link :to="'/user?name='+name+'&pwd='+pwd">查询字符串参数router-link> div> template> <script> export default { name: "Home", data(){ return { name: "xiaoming", pwd: "123", url: "/user", } }, methods:{ jump(){ // 开发中可以先进行权限，登录之类的判断，然后再进行跳转 // this.$router.back(); // 返回上一页，本质上就是 location.back() // this.$router.go(-1); // 返回上一页，本质上就是 location.go() // this.$router.forward(); // 跳转到下一页，本质上就是 location.forward() this.$router.push("/user"); // 跳转到站内的制定地址页面中，本质上就是 location.href // 注意,this.$router.push 不能跳转到其他网站。如果真的要跳转外站，则使用location.href="站外地址，记得加上http://协议" } } } script> <style scoped> style>

2. 可以下一个页面中,这里代表的就是User组件, 接收来自Home组件的参数.

<template>
    <div>
      用户中心页面组件
    div>
template>

<script>
    export default {
        name: "User",
        created() {
            // 接收地址栏上面的参数
            // this.$route是vue-router提供的一个用于接收地址参数的对象。
            // 经过main.js里面注册router对象以后，
            // 将来在所有的子组件中，可以通过this.$route来获取参数或者通过this.$router跳转页面
            // 查询字符串参数
            // query是this.$route里面的一个数组，this.$route会自动收集地址栏上所有的参数保存到query里面
            // let name = this.$route.query.name;
            // let pwd = this.$route.query.pwd;
            // console.log(`name=${name}&pwd=${pwd}`);  // ``里面，${}圈住的内容会被js当成变量来解析
        }
    }
script>

<style scoped>

style>

　　　　　　　　获取路由参数

例如: 我们的用户界面都是一样的,但是每一个用户来到自己的页面中,显示的内容都是不一样的,此时,我们需要使用不同的路径来

区分不同的用户.这时候,可以在路由路径中使用路由参数表示不同用户的ID.

例如: 我们需要设置一个route/inde.js中路由信息里面,那一段路由属于路由参数.

src/routes/index,js设置路由参数.

// 1. 引入vue和vue-router组件核心对象，并在vue中通过use注册vue-router组件
import Vue from "vue";
import Router from "vue-router";

Vue.use(Router); // Router是类
// 2. 暴露vue-router对象，并在vue-router里面编写路由，提供给main.js调用

// 导入组件
// import 组件名 from "../components/组件名"
import Home from "../components/Home";
import User from "../components/User";

export default new Router({
  mode:"history",  // 路由地址的显示模式： 默认hash，表示地址栏上面出现#
  routes:[
    // {
    //   name:"路由名称[对应组件的name值，将来用于跳转页面]",
    //   path: "访问url路径",
    //   component: 组件名
    // },
    {
      name:"Home",
      path: "/",
      component: Home
    },{
      name:"User",
      path: "/user/:id/img-:img_id",
      component: User
    },
  ],
});

// vue-router除了可以进行组件和url地址的绑定以外，还可以
// 进行不同组件的页面跳转，

然后我们就是在Home中如果需要转到User里面.

Homevue代码:

<template>
    <div>
      首页页面组件




      <router-link to="/user/100/img-10086">路由参数router-link>
    div>
template>

<script>
    export default {
        name: "Home",
        data(){
          return {
              name: "xiaoming",
              pwd: "123",
              url: "/user",
          }
        },
        methods:{
          jump(){
              // 开发中可以先进行权限，登录之类的判断，然后再进行跳转
                // this.$router.back(); // 返回上一页，本质上就是 location.back()
                // this.$router.go(-1); // 返回上一页，本质上就是 location.go()
                // this.$router.forward(); // 跳转到下一页，本质上就是 location.forward()
                this.$router.push("/user"); // 跳转到站内的制定地址页面中，本质上就是 location.href
                // 注意,this.$router.push 不能跳转到其他网站。如果真的要跳转外站，则使用location.href="站外地址，记得加上http://协议"
          }
        }
    }
script>

<style scoped>

style>

User.vue,组件中可以挺过 this.%route.params 接收路由参数.

<template>
    <div>
      用户中心页面组件
    div>
template>

<script>
    export default {
        name: "User",
        created() {
            // 接收地址栏上面的参数
            // this.$route是vue-router提供的一个用于接收地址参数的对象。
            // 经过main.js里面注册router对象以后，
            // 将来在所有的子组件中，可以通过this.$route来获取参数或者通过this.$router跳转页面

            // 查询字符串参数
            // query是this.$route里面的一个数组，this.$route会自动收集地址栏上所有的参数保存到query里面
            // let name = this.$route.query.name;
            // let pwd = this.$route.query.pwd;
            // console.log(`name=${name}&pwd=${pwd}`);  // ``里面，${}圈住的内容会被js当成变量来解析

            // 路由参数
            // params是this.$route里面的一个数组，this.$route会自动收集路由列表中已经标记为路由参数所有内容保存到params中
            let id = this.$route.params.id;
            console.log(id);
            let img_id = this.$route.params.img_id;
            console.log(`img_id = ${img_id}`);
        }
    }
script>

<style scoped>

style>

http://element-cn.eleme.io/#/zh-CN

文档快速入门：http://element-cn.eleme.io/#/zh-CN/component/quickstart

　　快速安装ElementUI

醒目根目录下执行该命令:

npm i element-ui -S

上面的代码等同于 npm install element-UI -- save

执行命令效果:

　　配置ElementUI到项目中

在main.js中导入ElementUI, 并调用. 代码:

// elementUI 导入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 调用插件
Vue.use(ElementUI);

成功引入了ElementUI以后,接下来我们就可以开始进入前端页面的开发,首先是首页>

首页

首页采用了上下页面布局, 首页是导航栏,,轮播图, 脚部等几个小模块.所以我们可以把首页作为一个组件进行开发, 然后把首页的这些小模块作为单独的组件来进行开发.

　　创建首页组件

在 src/conponents目录先创建文件 Home.vue代码:

<template>
  <div id="home">
    首页
  div>
template>

<script>
export default {
  name:"Home",
  data(){
    return {

    }
  }
}
script>

<style scoped>

style>

　　　　创建首页对应的路由

在router/index,js中引入Home组件,并设置Home组件作为首页路由代码:

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

// 后面这里引入可以被用户访问的页面组件
import Home from "../components/Home"

Vue.use(Router);

export default new Router({
  // 路由跳转模式，注意使用 history
  mode: "history",

  // 路由规则
  routes:[
    {
      // name:"路由别名",
      name:"Home",
      // path: "路由地址",
      path: "/",
      // component: 组件类名,
      component: Home,
    },
  ]
})

Vue学习

相关

标签