06_Vue-router与综合练习

这篇具有很好参考价值的文章主要介绍了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