vue router

最新推荐文章于 2023-10-31 21:19:25 发布
最新推荐文章于 2023-10-31 21:19:25 发布
阅读量195 收藏 1
点赞数
分类专栏： 前端 文章标签： vue.js node.js typescript elementui es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/greek7777/article/details/119539538
版权

文章目录

vue router

1、认识路由的概念

1.1、何为路由

通过互联的网络把信息从源地址传输到目的地址的活动.

1.2、后端路由阶段

早期的网站开发整个HTML页面是由服务器来渲染的.
    服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示.
但是, 一个网站, 这么多页面服务器如何处理呢?
    一个页面有自己对应的网址, 也就是URL.
    URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理.
    Controller进行各种处理, 最终生成HTML或者数据, 返回给前端.
    这就完成了一个IO操作.
上面的这种操作, 就是后端路由.
    当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户端
    这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化.
后端路由的缺点:
    一种情况是整个页面的模块由后端人员来编写和维护的.
    另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码.
    而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情.

1.3、前端路由阶段

前后端分离阶段：
    随着Ajax的出现, 有了前后端分离的开发模式.
    后端只提供API来返回数据, 前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中.
    这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上.
    并且当移动端(iOS/Android)出现后, 后端不需要进行任何处理, 依然使用之前的一套API即可.
    目前很多的网站依然采用这种模式开发.
单页面富应用阶段:
    其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.
    也就是前端来维护一套路由规则.
前端路由的核心是什么呢？
    改变URL，但是页面不进行整体的刷新。
如何实现呢？

前端渲染和后端渲染？

2、前端路由的规则

2.1、URL的hash 方式

location说明![动画1]
页面整个刷新
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s3NYm9Nj-1628494799542)(C:\Users\admin5\Desktop\动画1.gif)]
location.hash 局部刷新 而非全部刷新

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XFUGtB9d-1628494799544)(C:\Users\admin5\Desktop\动画2.gif)]

2.2、HTML5的history模式

  • pushState back 栈结构
    特点：先进后出 pushState:入栈 back:出栈
    效果如下
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vTOZiOwH-1628494799545)(https://note.youdao.com/yws/res/33743/WEBRESOURCEbb3be5b7534d621dc55b7354eb0487c5)]

  • replaceState back 替换
    不能回退

  • go

    history.go(-1) 后退一步
    history.go(1) <=> history.forward() 前进一步

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9mJAh5Q9-1628494799546)(https://note.youdao.com/yws/res/7/WEBRESOURCEba699b0d85702ff6d32ccd8f753cca57)]

3、route-view的基础

3.1 认识vue-router

  • vue-router是基于组件和路由实现
路由用于设定访问路径, 将路径和组件映射起来.
 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.

3.2、安装和使用vue-router

  • 使用webpack创建工程化开发
  • 安装npm install vue-router --save
  • 模块化使用
    • 导入路由对象，并且调用Vue.use(VueRouter)
    • 创建路由实例，并且传入路由映射配置
    • 在vue实例中挂载创建的路由实例
  • 使用vue-router步骤
    • 创建路由组件
    • 配置路由映射，组件和路径映射关系
// 创建VueRouter对象
const routes = [
    {
        path: '',
        <!--路由的默认值-->
        // 页面默认加载  直接访问主页
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    },
]

const router = new VueRouter({
    // 配置路由和组件之间的应用关系
    routes,
    mode:"history",
    linkActiveClass:"active"
})
  • 使用路由 router-link和 router-view
<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="about">About</router-link>
    <router-view/>
  </div>
</template>

大致流程
1、创建路由组件
在这里插入图片描述
2、配置组件和路径的映射关系
在这里插入图片描述
3、使用路由
在这里插入图片描述
在这里插入图片描述

3.3、路由的默认路径

默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容.
但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以.
如何可以让路径默认跳到到首页, 并且<router-view>渲染首页组件呢?
非常简单, 我们只需要配置多配置一个映射就可以了.

在这里插入图片描述

配置解析

    我们在routes中又配置了一个映射. 
    path配置的是根路径: /
    redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.

3.4、HTML5的history模式

页面默认是 url的hash模式

在这里插入图片描述

想要改成html5中history，可以进行一下配置
在这里插入图片描述

修改后
在这里插入图片描述

3.5、router-link补充

  • tag属性：tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个元素, 而不是
    在这里插入图片描述

  • replace属性:replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中

  • active-class属性： 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称.

在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类.
但是通常不会修改类的属性, 会直接使用默认的router-link-active即可.

也可以通过这种方式 在路由配置的index.js
在这里插入图片描述
路由代码跳转

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <h1>我是网站首页1</h1>
    <!-- <router-link to="/home" tag="h3" replace>首页</router-link>
    <router-link to="/about" tag="h3" replace>关于</router-link> -->

    <button @click="linkToHome">主页</button>
    <button @click="linkToAbout">about</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  methods: {
    linkToHome() {
      this.$router.push("/home");
    },
    linkToAbout() {
      this.$router.push("/about");
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3.6、动态路由

在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：
/user/aaaa或/user/bbbb
除了有前面的/user之外，后面还跟上了用户的ID
这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。

1、配置组件和路径的映射关系

// 配置路由相关的信息
import Vue from 'vue'
import VueRouter from "vue-router"

import Home from '../components/Home'
import About from '../components/About'
import User from '../components/User'
// 通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

// 创建VueRouter对象
const routes = [
    {
        path: '',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    }, 
    <!--这是关键代码-->
    {
        path: '/user/:id',
        component: User
    },
]

const router = new VueRouter({
    // 配置路由和组件之间的应用关系
    routes,
    mode: "history",
    linkActiveClass: "active"
})

// 将router对象传入Vue实例
export default router

2、创建组件User User.vue

<template>
    <div>
        <h1>我是APP页面</h1>
        {{$route.params.id}}
    </div>
</template>

3、首页显示

<template>
    <div>
        <h1>我是APP页面</h1>
        {{$route.params.id}}
    </div>
</template>

4、效果图
app.vue
在这里插入图片描述
User.vue

<template>
  <div>
    <h1>我是User标题</h1>
    <span>{{$route.params.id}}</span>
  </div>
</template>

index.js 路由配置

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../components/Home.vue";
import User from "../components/User.vue";
import About from "../components/About.vue";
// 1、注入插件
Vue.use(VueRouter);

// 2、定义路由
const routes = [
  {
    path: "/home",
    component: Home,
  },
  {
    path: "/about",
    component: About,
  },
  // 定义默认路由路径
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/user/:id",
    component: User,
  },
];

// 3、创建router实例
const router = new VueRouter({
  routes,
  // 使用HTML5 history模式
  mode: "history",
  linkActiveClass: "active",
});

// 4、导出router实例
export default router;

页面显示
在这里插入图片描述

4、路由的懒加载

4.1、认识懒加载

官方给出了解释:
    当打包构建应用时，Javascript 包会变得非常大，影响页面加载。
    如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
官方在说什么呢?
    首先, 我们知道路由中通常会定义很多不同的页面.
    这个页面最后被打包在哪里呢? 一般情况下, 是放在一个js文件中.
    但是, 页面这么多放在一个js文件中, 必然会造成这个页面非常的大.
    如果我们一次性从服务器请求下来这个页面, 可能需要花费一定的时间, 甚至用户的电脑上还出现了短暂空白的情况.
如何避免这种情况呢? 使用路由懒加载就可以了.
路由懒加载做了什么?
    路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.
    只有在这个路由被访问到的时候, 才加载对应的组件

4.2、懒加载效果

// 配置路由相关的信息
import Vue from 'vue'
import VueRouter from "vue-router"

const Home = () => import ('../components/Home')
const About = () => import ('../components/About')
const User = () => import ('../components/User')
// 通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

// 创建VueRouter对象
const routes = [
    {
        path: '',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    }, {
        path: '/user/:id',
        component: User
    },
]

const router = new VueRouter({
    // 配置路由和组件之间的应用关系
    routes,
    mode: "history",
    linkActiveClass: "active"
})

// 将router对象传入Vue实例
export default router

4.3、懒加载方式

在这里插入图片描述

5、路由的嵌套使用

5.1、认识嵌套路由

嵌套路由是一个很常见的功能
比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容.
一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件.

组件和路径关系
在这里插入图片描述

实现嵌套路由有两个步骤:
创建对应的子组件, 并且在路由映射中配置对应的子路由.
在组件内部使用标签.

5.2、实现过程

1、创建两个组件Message,News

Message.vue
<template>
    <div>
        <h1>这是message页面</h1>
    </div>
</template>
<script>
export default {
  name:"Message"
}
</script>

<style scoped>

</style>


News.vue

<template>
    <div>
        <h1>这是news页面</h1>
    </div>
</template>
<script>
export default {
  name:"News"
}
</script>

<style scoped>

</style>

2、配置子路由
注意子路由 不加/
在这里插入图片描述

// 配置路由相关的信息
import Vue from 'vue'
import VueRouter from "vue-router"

const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')
const Message = () => import('../components/Message')
const News = () => import('../components/News')

// 通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

// 创建VueRouter对象
const routes = [
    {
        path: '',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    }, {
        path: '/user',
        component: User,
        children: [
            {
                path: 'message',
                component: Message,
            },
            {
                path: 'news',
                component: News,
            },
        ]
    },
]

const router = new VueRouter({
    // 配置路由和组件之间的应用关系
    routes,
    mode: "history",
    linkActiveClass: "active"
})

// 将router对象传入Vue实例
export default router

3、父组件显示 User.vue

<template>
  <div id="user">
    <h1>我是APP页面</h1>
    <!-- {{ $route.params.id }} -->
    <router-link to="/user/message">Message</router-link>
    <router-link to="/user/news">News</router-link>
    <!--关键来显示-->
    <router-view/>
  </div>
</template>

5.3、嵌套路由的默认路径

重定向redirect

{
        path: '/user',
        component: User,
        children: [
            {
                path: 'message',
                component: Message,
            },
            {
                path: 'news',
                component: News,
            },
            {
                path: '',
                redirect: 'news',
            },
        ]
    },

6、路由传递参数

6.1、准备工作

router-link 传递
1、创建组件Profile.vue

<template>
  <div>
    <h2>我是Profile页面</h2>
    <p>我是profile页面具体内容</p>
    <!--获取字符串入参 譬如：/profile/123-->
    <p>$route.params:{{ $route.params }}</p>
    <!--获取对象类型入参 譬如: /profile?name=1&age=10-->
    <p>$route.query:{{ $route.query }}</p>
  </div>
</template>

<script>
export default {
  name: "Profile",
};
</script>

<style scoped>
</style>

2、配置路由

const Profile = () => import('../components/Profile')
    {
        path: '/profile/:id',
        component: Profile
    }

3、app.vue 页面显示

 <router-link
      :to="{
        path:'/profile/'+123,
        query: { name: 'pmb', age: 180 },
      }"
    >
      档案</router-link
    >

4、最终效果
在这里插入图片描述

js传递

 <button @click="userClick">用户点击</button>
   /**
    * 从主页app.vue跳转profile.vue  携带数据userid 和 对象query
    **/
    userClick() {
      // 通过代码方式修改路由 vue-router
      // this.$router.replace("/home");
      // this.$router.push("/profile/" + this.userId);
      this.$router.push({
        path: "/profile/" + this.userId,
        query: {
          name: "pmb",
          age: 22,
          height: 180,
        },
      });
    },
    
    profile.vue获取参数
     <p>$route.params:{{ $route.params }}</p>
    <p>$route.query:{{ $route.query }}</p>

6.2、传递参数的方式

传递参数主要有两种类型: params和query
params的类型:
    配置路由格式: /router/:id
    传递的方式: 在path后面跟上对应的值
    传递后形成的路径: /router/123, /router/abc
query的类型:
    配置路由格式: /router, 也就是普通配置
    传递的方式: 对象中使用query的key作为传递方式
    传递后形成的路径: /router?id=123, /router?id=abc

6.3、获取参数

获取参数通过$route对象获取的.
在这里插入图片描述

6.4、 r o u t e r 和 router和 router和route区别

$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
$route为当前router跳转对象里面可以获取name、path、query、params等

7、路由导航守卫

导航钩子的三个参数解析:
to: 即将要进入的目标的路由对象.
from: 当前导航即将要离开的路由对象.
next: 调用该方法后, 才能进入下一个钩子.

// 配置路由相关的信息
import Vue from 'vue'
import VueRouter from "vue-router"

const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')
const Message = () => import('../components/Message')
const News = () => import('../components/News')
const Profile = () => import('../components/Profile')

// 通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

// 创建VueRouter对象
const routes = [
    {
        path: '',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home,
        meta: {
            title: "首页"
        }
    },
    {
        path: '/profile/:id',
        component: Profile,
        meta: {
            title: "档案"
        }
    },
    {
        path: '/about',
        component: About,
        meta: {
            title: "关于"
        }
    }, {
        path: '/user',
        component: User,
        children: [
            {
                path: 'message',
                component: Message,
            },
            {
                path: 'news',
                component: News,
            },
            {
                path: '',
                redirect: 'news',
            },
        ]
    },
]

const router = new VueRouter({
    // 配置路由和组件之间的应用关系
    routes,
    mode: "history",
    linkActiveClass: "active"
})

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

// 将router对象传入Vue实例
export default router

请添加图片描述

8、keep-alive

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
它们有两个非常重要的属性:
include - 字符串或正则表达，只有匹配的组件会被缓存
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
应用

geekmice
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router
小毛驴的博客
05-16 3002
官网：https://router.vuejs.org/zh-cn/ 因为我们更多的是利用vue+webpack搭建整个项目的框架（例如vue-cli），所以我们这里利用vue-cli讲解 1.路由的介绍 何为前端路由 路由是根据不同的url展示不同的页面或内容 前端路由就是把不同路由对应不同内容或者页面的任务放在钱前端，以前是服务端根据不同的url返回不同的内容 何时使用前端路由 ...
vue从入门到精通
10-31
专注提升vue0-5年开发经验在线提升进阶技术！课程均为一线互联网大咖亲自授课，为10年以上开发经验，和多年在线教育行业经验讲师亲授！
vue-router中的beforeEach
GodLoveMe的博客
09-02 1万+
最近在做vue项目的开发，用到的技术栈主要是vue相关的，在开发这个项目的时候，设计到了权限，因为是后台管理系统，不同的身份和角色访问系统的时候，系统所展现出来的可访问内容都是不一样的，有兴趣的同学可以参考下RBAC（以角色为基础的权限管理设计）这篇文章写得很详细，很直观，我写这篇文章主要是想要分享一下前端的技术栈vue-router是如何处理的，以及踩过的坑。 vue-router 可以参考官方文档vue-router，官方文档中介绍的很详细，解决权限问题，就用到了addRoutes这个API，去动态添
vue-router的安装和使用
CSSAJBQ_的博客
11-23 7761
第一步：导入路由对象，并且调用Vue.use(VueRouter)第三步：使用路由:通过< router-view >推荐安装稳定版本 vue-router@3.5.2。第二步：创建路由实例，并且传入路由映射配置。第三步：在Vue实例中挂载创建的路由实例。第二步：配置路由映射：组件和路径映射关系。vue create 项目名称（英文）第一步：创建路由组件。
Vue 安装 Vue-router 路由安装以及使用
xiaowude_boke的博客
07-18 3918
Vue-router 路由安装以及使用
22_VueRouter路由使用.pdf
10-07
VueRouter路由使用.pdf VueRouter是Vue.js的官方路由，它与Vue.js核心深度集成，让用Vue.js构建单页应用变得非常容易。Vue Router是基于路由和组件的，路由用于设定访问路径，将路径和组件映射起来。在VueRouter的...
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
08-28
vue router 嵌套路由在 history 模式下刷新无法渲染页面问题的解决方法 一、问题描述 ---------------- 在使用 vue router 嵌套路由时，我们可能会遇到一个问题，即在 history 模式下刷新页面时，嵌套路由页面无法...
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版
最新发布
04-03
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 是现代前端开发中一套流行的组合，用于构建高效、可维护的后台管理系统。这套模板利用了最新版本的技术栈，旨在提高开发效率并提供良好的用户体验。 首先，Vue3...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue router 传参获取不到的解决方式
10-15
今天小编就为大家分享一篇vue router 传参获取不到的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue从入门到精通
qq_46555046的博客
06-07 1312
Vue学习入门
vue中 router.beforeEach() 的用法
seimeii的博客
08-10 3万+
vue中 router.beforeEach() 的用法
vue入门到精通（一）
zxpmoxo的博客
01-11 1219
保姆级分享，快速上手并达到开发水准
Vue路由（router）的安装和使用
weixin_47957908的博客
10-31 2827
Vue路由（router）的安装和使用。
vue系列 —— vue-route详细使用方法
七月
11-30 3万+
说到路由， 我们最熟悉的路由是什么呢？ 那就是路由器了。 其实路由器有两个重要的功能： 路由和传送 路由： 路由决定数据包从哪里来， 到哪里去。 也有是来源和目的地的路径。 路由中有一个路由表，路由表本质上就是一个映射表，决定了数据包的传输方向。 传送： 传送是将输入端的数据传送给输出端 下面我们先来搭建一个项目, 然后一边学习一遍在项目里实战 创建vue-cli2项目 vue init webpacek vueroute 然后一路向下就可以了, 如果本地创建项目很慢, 可以采用离线创建项目的
Vue Router安装使用教程
weixin_43749805的博客
05-09 939
Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）。
运行报错Parsing error: The keyword ‘import‘ is reserved
热门推荐
极客鼠之家
08-16 3万+
问：运行报错Parsing error: The keyword ‘import’ is reserved 答： 分析： 这是因为我们还没有在配置文件.eslintrc中配置parserOptions来指定语言版本为和模块类型。 在.eslintrc添加如下配置 { "parserOptions": { "ecmaVersion": 7, "sourceType": "module" } } ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值