Vue-Router_vue router :id-CSDN博客

在前后端分离阶段大的基础上加了一层前端路由,也就是前端维护一套路由规则
整个网页只有一个html页面（index.html+css+js只有一个），按不同的按钮url就换不同的应用，（点不同的url不需要再向静态资源服务器再去请求了），即抽取对应的不同的资源（就是对应的vue组件），这就需要前端路由做技术支撑

三:URL

借鉴：前端菜鸟笔记：看了就懂的 URL_前端辣么菜的博客-CSDN博客_前端url

介绍：Internet上的每一个网页都具有一个唯一的名称标识

格式:协议://localhost:端口/path?query

/profile?name=张一&age=13
localhost相当于域名,也是主机,也是服务器地址

path就是profile？需要访问的页面

query就是name=张一&age=13,具体查询的参数

四:安装脚手架

npm install -g @vue/cli@3.2.1
因为还要教学脚手架2,所以拉取2.X模板npm install -g@vue/cli-init
这样2和3都能用了

五:建立脚手架

CLI2初始化项目:vue init webpack 项目名称
CLI3初始化项目:vue create 项目名称

六:runtime-compile和runtime-only

runtime-compile和runtime-only的选择:后边更多

runtime-compile和runtime-only的选择:后边更多,性能高,编译出来的代码量更少

七:vue的图形化管理

VueCli3配置文件的查看和修改:

命令vue ui

访问页面

选择导入

可以进行配置修改和查看

八:url改变,但是不重新请求资源:(两种方式）

url改变,但是不重新请求资源:(两种方式)用浏览器console控制
第一种:location.hash='aaa'
第二种:history.pushState({},'','about')
          history.pushState({},'','home')
         上面的操作相当于压栈,下面相当于进出栈
          history.go(-1)

九:使用路由:

1:安装或者在初始化项目的时候点上vue-router，或者图形化界面自己加
2:编写vue组件

3:把组件导入到路由管理中的 index.js，并配置路由的映射关系（一个vue组件对应一个路径）

4:在App.vue中设置路由跳转

十:路由的默认路径设置:

默认是hash模式,想修改成html5的history模式

hash模式会有一个#号，不希望要这种

修改：在路由设置中修改mode的值

效果：

十一:路由跳转的两种方式：

1：标签<router-link>，在内部默认会被渲染成a标签

搭配<router-view></router-view>：把跳转的页面内容渲染出来

属性：

tag:可以指定<routerlink>之后渲染组件是什么形式的,button还是a标签形式的？默认是a标签
replace:不会留下history记录，即页面不会回退

active-class：当《router-link》对应的路由匹配成功时，会给当前属性设置一个router-link-active的class，如果不想要router-link-active的名字，可以通过active-class进行修改（但默认不改）

比如我想点哪个哪个就变红

2：方法（通过代码方式，进行路由跳转）

写事件监听

写对应方法

十二:动态路由

很多情况下，我们的url都是不确定的，比如

/user/45345

/user/23445

只能确定前面一部分，后面的不确定,所以就需要动态路由

1：在App.vue中设置userId的默认值(做项目可以通过后端传来的数据修改)

2：编写User.vue组件，并在路由设置中,配置路由的映射关系，并且在后边加上:userid(:冒号表示动态不要忘记)

3：App.vue中的路由跳转，写上+userId

4：效果

5：如果想在user组件上的页面上显示出参数userId的具体值，可以在vue组件上直接用{{$route.params.userId}}，就能取出参数

this.$route表示拿到正在使用的路由

$route代表活跃的路由,是一个路由
$router代表整体路由,在index.js里new出来的

也可以通过计算属性，取出参数

6：效果

十三:路由的懒加载:

因为打包构建应用时,js包会非常大,影响页面加载,

如果我们能把不同的路由对应的组件分割成不同的代码块。然后当路由被访问的时候才加载对应的组件就更高效了

懒加载导入：

十四:路由的嵌套:

比如在home页面中,我们希望还有/home/news和 /home/message的链接并展现其对应内容

1：编写子组件（需要嵌套的组件）

homeMessage.vue和HomeNews.vue

2：在父组件中添加两个子组件的路由跳转

在home.vue中加入两个路由跳转链接

3：配置路由映射关系（子组件由children [ ]包含起来）

在router中的index.js中添加路由映射

5：在app.vue中添加home的路由跳转

6：效果

十五:路由的参数传递(一个路由跳转到另一个路由传递参数)

一：标签跳转写法

标签传递参数有两种方式params和query

如果传递的参数较多，用第二种

第1种:params: （这个就和动态路由一样）

1:编写user.vue组件，并为该组件配置路由，配置路由格式 /user/:userId

2：写需要传递的参数，这里是userId (如果数据是明确的，以后不会变或者只用1此可以不定义）

data() {
  return {
    userId: 123

2: 前一个页面:to="'/user/'+userId"
3:后一个页面由{{$route.params.userId}}获取
4:传递后形成的路径:/user/123,和/user/abc

第2种:query:（推荐）

1:编写user.vue组件，并为该组件配置路由，配置路由格式为/user,也就是普通配置

2：写需要传递的参数，这里是userId (如果数据是明确的，以后不会变或者只用1此可以不定义）

data() {
  return {
    userId: '张海峰'

3:前一个页面:

<router-link :to="{path:'/profile',query:{name:userId ,age:13}}">档案1-标签跳转</router-link>

4:后一个页面{{$route.query.name}}获取（注意是query）
5:传递后形成的路径:/profile?name=张一&age=13

二：代码传递写法

如果传递的数据较多用第二种

第一种传递的是参数，第二种传递的是对象

第一种：result风格（这个风格是我自己瞎掰的）

1：写uer.vue，以及配置路由

2：app.vue中写需要传递的参数

3：app.vue中写监听事件，以及对应方法

第二种：普通风格（这个风格是我自己瞎掰的）

这里简写了，不详细阐述

十六:$route和$router

$route代表代表活跃的路由,是一个路由，可以获取跳转对象的name、path、query、params等。
$router代表整体路由,在index.js里new出来的，想导航不同的URL就需要使用$router.push方法

十七:全局导航守卫

需求：切换不同的页面显示不同的标题

设置：在路由设置中写一段代码

代码：

router.beforeEach((to, from, next) => {
  document.title = to.matched[0].meta.title;
  console.log(to);
  next()
})

效果：

十八:keep-alive

作用是保留各组件状态,避免重新渲染(因为一个标签点上就会被创建点别的就会被销毁,点回来还要重新创建),提高性能

比如我点了首页中的新闻，然后我又点中关于，然后我又点回首页，显示的内容还是新闻内容

1：在home.vue方法中写

beforeRouteLeave(to,from,next){
            console.log(this.$route.path)
            this.path=this.$this.path
            next()
          }

2：需要显示的内容，被<keep-alive>标签包含

写在一个组件里其他就跟着生效了

效果：我点了首页中的新闻，然后我又点关于，然后我又点回首页，显示的内容是首页中的关于内容

借鉴：keep-alive的使用及详解_一夜枫林的博客-CSDN博客_keep-alive

Vue-Router

一:路由

二:发展阶段

后端渲染阶段：

前端渲染阶段：

单页面富应用阶段SPA：

三:URL

四:安装脚手架

五:建立脚手架

六:runtime-compile和runtime-only

七:vue的图形化管理

命令vue ui

访问页面

选择导入

可以进行配置修改和查看

八:url改变,但是不重新请求资源:(两种方式）

九:使用路由:

1:安装或者在初始化项目的时候点上vue-router，或者图形化界面自己加2:编写vue组件

3:把组件导入到路由管理中的 index.js，并配置路由的映射关系（一个vue组件对应一个路径）

4:在App.vue中设置路由跳转

十:路由的默认路径设置:

默认是hash模式,想修改成html5的history模式

修改：在路由设置中修改mode的值

十一:路由跳转的两种方式：

1：标签<router-link>，在内部默认会被渲染成a标签

2：方法（通过代码方式，进行路由跳转）

十二:动态路由

1：在App.vue中设置userId的默认值(做项目可以通过后端传来的数据修改)

2：编写User.vue组件，并在路由设置中,配置路由的映射关系，并且在后边加上:userid(:冒号表示动态不要忘记)

3：App.vue中的路由跳转，写上+userId

4：效果

5：如果想在user组件上的页面上显示出参数userId的具体值，可以在vue组件上直接用{{$route.params.userId}}，就能取出参数

6： 效果

十三:路由的懒加载:

十四:路由的嵌套:

1：编写子组件（需要嵌套的组件）

2：在父组件中添加两个子组件的路由跳转

3：配置路由映射关系（子组件由children [ ]包含起来）

5：在app.vue中添加home的路由跳转

6：效果

十五:路由的参数传递(一个路由跳转到另一个路由传递参数)

一：标签跳转写法

第1种:params: （这个就和动态路由一样）

第2种:query:（推荐）

二：代码传递写法

第一种：result风格（这个风格是我自己瞎掰的）

十六:$route和$router

十七:全局导航守卫

十八:keep-alive

“相关推荐”对你有帮助么？

1:安装或者在初始化项目的时候点上vue-router，或者图形化界面自己加
2:编写vue组件

6：效果