06_Vue-router与综合练习

Vue-router

一.生命周期钩子函数

含义:在生命周期处理响应函数的别称

1.初始化

beforeCreat:创建对象时,没初始化data和methods

created:实例已经创建好了,此时在里面发送ajax请求

2.挂载

beforeMount:还没与挂载到页面中

munted:模块已经挂载好了

3.更新

beforeUpdate:更新之前的数据

Updated:已经更新好的数据

改变视图数据的时候使用

4.销毁

beforeDestroy:实例销毁之前调用

destroyed：实例销毁之后使用

vue CLI脚手架

帮助快速搭建vue项目的工具

1.安装脚手架,控制台

npm install -g @vue/cli

2.使用脚手架创建项目,在自己的项目位置下的控制台

vue create 项目名称

3.使用上下键和空格键进行选择,使用最后一个(Manually …)手动配置,除了TypeScript不选,前五个都选,后面选择less处理css

4.需要进入项目目录 “cd 项目名称”

5.使用命令运行项目 “npm run serve”

6.浏览器输入地址进行访问 “http://localhost:8081/”

7.给idea在plugins中安装vue.js 的插件,否则没有对应的模块可以使用

vue路由

本质就是一个映射表,决定数据的指向

后端路由

单体项目(前后端代码混在一起)

​ 1.使用contrller中执行请求和响应

​ 2.跳转到一个视图页面(服务器找对应的视图),经过渲染(解析jsp中的jstl),生成对应的html代码

​ 3.将渲染好的html响应给浏览器

​ 4.后端渲染的好处:提高首屏渲染的性能

​ 5.缺点:维护难度偏大

前后端分离

​ 后端一个项目:

​ 写接口,给前端提供数据(json/xml等)

​ 前端一个项目:

​ 数据渲染(将数据填充到指定位置)

​ 页面较多,如何进行跳转

​ js跳转:location.href=url,刷新整个页面

​ 前端路由:不会刷新整个页面

spa(单页面应用)

​ 刷新整个页面

非spa

不刷新整个页面

前端的路由规则

步骤:

​ 1.在App.vue中添加链接

​ 2.在view文件中添加view页面

​ 3.添加 页面之后,需要在rutor中配置路由

4.使用packge.json文件进行运行

路由模式(两种 index.js)

**作用:**用于映射views中的文件和app.vue文件中的关系

两钟都不会刷新整个页面

const router = new VueRouter({
  routes,
 /* mode:"history"*/
})

hash:

不会重新加载页面,不会影响请求资源

​ 浏览器:http://localhost:8080/#/about

​ 实际发送的时候是:http://localhost:8080

history:

会重新加载页面,会影响请求资源

​ 浏览器:http://localhost:8080/about

​ 实际发送的时候是:http://localhost:8080/about,

路由加载的两种模式(index.js)

配置访问路径(映射app.vue中写的)

路由的重定向,使用redirect属性

{
  //配置默认访问的路径
  path: '/',
  //重定向,可以指定另一个组件的path或者name
  redirect:"/home"   //或者redirect:"home"
},
{
  path: '/home',
  name: 'home',
  //页面加载之后,当前视图立即加载
  component: HomeView
},

1.立即加载

​ 页面加载之后,视图立即加载,用于css样式,js脚本

import HomeView from '../views/HomeView.vue'//导入HomeView

,
  {
    path: '/home',
    name: 'home',
    //页面加载之后,当前视图立即加载
    component: HomeView
  },

2.懒加载

​ 按需加载,不访问就不会加载,用于图片和视频

,

  {
    //懒加载,按需加载,如果不访问就不会加载
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },

魔法注释

component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

里面的注释是"魔法注释",webpack做打包使用,不是纯注释,生成的不能进行删除

路由跳转的方式(两种 ,在app.vue配置)

1.使用"router-link"标签进行跳转,这是使用的是组件的方式

​ 该标签会被自动解析成a标签,可以使用tag=""属性将其转化为其他标签

<!--tag:可以指定转化之后的标签类型-->
<router-link to="/">Home</router-link>

2.使用编程的方式进行跳转(两种:name/path)

使用自定义事件进行跳转

<!-- 如果不是组件的方式就使用编程的方式进行跳转-->
<button @click="goPage">学生详情</button>

这种跳转浏览器不允许自己跳转到自己

<script>
export default {
  name: 'StudentView',
  methods: {
    goPage() {
      //如果当前页面不是student,那么才做跳转
      if (this.$route.fullPath !== "/student") {
        this.$router.push({name: "student"})
       // this.$router.push({path: "/student"})
      }
    }
  }
}
</script>

路由命名

1.配置路由的时候,使用name给路由进行命名

const router = new VueRouter({
 routes: [
 {
 path: '/user/:userId',//携带参数,参数在浏览器输入
 name: 'User', // 对路由进⾏命名
 component: () => import(/* webpackChunkName: "user" */ '../views/Use
r.vue')
 }
 ]
})

2.跳转至指定路由页面,并携带参数

fouter.push({name:"user",params:{userId:123}})

3.在组件中使用$route.params.userId获取参数

<script>
export default {
  name: "StudentView",
  created() {
    console.log(this.$route.params.userId);
    //发送请求查询学生信息
  }
}
</script>

query和params传参

区别如下

this.$router.push({name: "User", params: {userId: 123}})
// http://localhost:8081/user/123

this.$router.push({name: "User", query: {userId: 123}}) 
// http://localhost:8081?userId=123

注意:

​ 使用name进行跳转,可以使用params和query进行跳转

​ 当跳转使用的是path,不能使用过params(传的值为undefined),只能携带query