Vue-router

已于 2022-11-06 21:51:20 修改
阅读量1.3k 收藏 2
点赞数 1
分类专栏： Web开发笔记 文章标签： vue
于 2022-11-02 08:30:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43895819/article/details/127605127
版权

简介

是一个vue官方出品的 管理组件切换 的 插件

  • 路由，用来找路。管理路径之间的切换，不同url对应不同的组件
  • 核心思想：在同一个页面根据url进行组件切换，类似动态组件, 最终在 router-view 处出口
  • 路由一般最多3级
  • 版本对应: vue2 对应 v3.x | vue3 对应 v4.x

区分路由

前端路由 (hash路由)

在同一个html页面, 显示不同的内容(组件). 进而建立了URL和组件之间的对应关系

在同一个页面, 借助锚链接实现同一页面的不同部分的跳转

第一章: http://localhost:5500/index.html#chap1

第二章: http://localhost:5500/index.html#chap2

像#chap1, #chap2...这样的锚链接, 也叫做hash路由 也称为前端路由

后端路由

提供接口(数据)服务, 将不同请求方式+url, 映射到处理函数. 建立了URL和处理函数之间的对应关系

入门案例🟢

Vue三步

  • 引入vue.js
  • 创建页面容器
  • 实例vue实例

VueRouter

  • 引入vue-router.js
  • 定义组件对象
  • 定义路由规则routes
    • route: 路由规则, URL和组件的对应关系
    • routes: 由路由规则组成的数组
  • 定义创建路由对象router
    • 用于管理路由规则
  • 挂载router到根实例

改造html

  • 编写路由链接 router-link
  • 编写路由出口 router-view
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 一、vue三步，CDN -->
    <!-- 二、编写两个组件 Home，About -->
    <!-- 三、使用vue-router管理路由（组件间切换）-->
    <!-- 1.1 引入vue.js -->
    <script src="https://unpkg.com/vue@2"></script>
    <script src="https://unpkg.com/vue-router@3"></script>
  </head>
  <body>
    <!-- 1.2 编写页面容器 -->
    <div id="app">
      <!-- 配置路由出口 -->
      <!-- <a href="#/home">首页</a>
      <a href="#/about">相关</a> -->

      <!-- 改变url，找到组件，并渲染到 -->
      <router-link to="home" tag="div">首页</router-link>
      <router-link to="about">相关</router-link>
      <router-view></router-view>
    </div>
    <!-- 1.3 创建vue根实例 -->
    <script>
      //定义组件对象
      const Home = {
        template: '<div>home子组件</div>',
      }
      const About = {
        template: '<div>about子组件</div>',
      }

      //3.2 创建路由规则（url -> 组件对应关系）
      const routes = [
        { path: '/home', component: Home },
        { path: '/about', component: About },
      ]

      //3.3 创建VueRouter实例（路由器）
      const router = new VueRouter({
        routes: routes,
      })

      // 3.4 将路由对象挂载到根实例
      const vm = new Vue({
        el: '#app',
        router: router
      })
    </script>
  </body>
</html>

集成到项目中

安装

 npm i vue-router@3

vue2 安装 vue-router3.x

vue3 安装 vue-router4.x

手动集成

  1. 安装
  2. 创建路由文件 src/router/index.js
  3. 在main.js中导入路由对象
  4. 创建页面级路由文件
  5. 编写路由规则
  6. 在app.vue中配置路由出口

VueRouter

  • 引入
  • 定义组件对象
  • 定义路由规则routes
  • 定义创建路由对象router
  • 挂载router到根实例
//最核心的内容，导出VueRouter对象
import Vue from 'vue'
//1. 导入VueRouter
import VueRouter from 'vue-router'

import Home from '../views/Home'
import About from '../views/About'

// debugger //在代码中打断点
//安装插件（注册router-view，router-link组件，在 Vue上挂载 $router, $route）
Vue.use(VueRouter)
//2. 创建路由规则
// 页面级组件（大）放到views，公共组件、小组件放到components
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About },
]

//3. 创建VueRouter的实例
const router = new VueRouter({
  routes,
})

//4. 导出router实例
export default router

Vue.use(VueRouter)安装插件，在vue-router的install方法中进行：

在Vue上注册router-view、router-link组件

在Vue原型对象上挂载了$router $route

在代码中打断点：debugger

<template>
  <div id="app">
    <!-- 路由的出口 -->
    <router-view></router-view>
  </div>
</template>
// 导入路由对象
import router from './router'

new Vue({
  // 挂载
  router,
  render: (h) => h(App),
}).$mount('#app')

自动集成🟢

使用@Vue/cli工具创建项目时, 构建项目时直接选择router

  • #/abouthash模式
  • /about history模式（需要？支持）

const routes = [
  //设置一级路由
  //login-登录页
  { path: '/login', component: () => import('@/views/Login') },
  //home-后台首页
  {
    path: '/home',
    component: () => import('@/views/Home'),
    //优化三、设置默认重定向
    redirect: '/home/article',
    children: [
      // 不写/，会跟base路由拼接，最终效果/home/article
      { path: 'about', component: () => import('@/views/About') },
      { path: 'user', component: () => import('@/views/User') },
      // webpack分包机制/ 路由懒加载，常用，异步路由加载
      { path: 'Article', component: () => import('@/views/Article') },
      // 优化一： 提供空的子路由，覆盖路由不匹配的情况
      { path: '', component: () => import('@/views/Article') },
    ],
  },
  // 优化二： 默认路由，*要写在最下面
  { path: '*', component: () => import('@/views/NotFound') },
]

案例

<template>
  <div id="app">
    <a href="#/todo">Todo组件</a>
    <a href="#/article">Article组件</a>
    <div class="page">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'App',
  }
</script>

$router路由规则与$route路由对象

路由对象

$router表示路由对象

  • 包含路由规则对象
  • 操作路由规则对象 (push, replace, go)

路由规则

路由对象上的routes数组, 构成了路由规则$route

  • 解析URL

                参数

                query

  • 使用其属性

$route.path 对应 router/index.js中定义的路由规则

动态路由参数🟢

获取到user的id //localhost:8080/user?id=3 3

<template>
  <div>
    {{ $route.params.id }}
  </div>
</template>
methods: {
  handleClick() {
      this.$router.params.id
  },
},

路由出口 router-link 与 router-view

  • 编写路由链接 router-link
    • 实现组件之间的切换
    • 默认情况, 被渲染为a元素
    • 可通过指定tag属性, 渲染为任意元素
<router-link to="/todo" tag="li">
  显示Todo组件</router-link>
<router-link to="/article">
  显示Article组件</router-link>

<li>显示Todo组件</li>
<a href="#/article">显示Article组件</a>
  • 编写路由出口 router-view

一级路由出口

<template>
  <div id="app">
    <!-- 设置一级路由的出口 -->

    <!-- <router-view></router-view>-->
    <!-- 自闭合的组件（并非dom）写法，只有在使用构建工具时支持，双标签写法更常用 -->
    <router-view />
  </div>
</template>

二级路由出口

<template>
<div class="home-container">
  <aside>
    <ul>
      <router-link to="/home/user"  tag="li">用户</router-link>
      <router-link to="/home/article" tag="li">文章</router-link>
    </ul>
  </aside>
  <main>
    <header></header>
    <!-- 二级路由出口，嵌套路由 -->
    <router-view></router-view>
  </main>
</div>
</template>

编程式导航🟢

导航

<a> ---声明式导航

router----编程式导航

vue-router两种方法

  • 使用router-link实现导航
  • 调用$router路由器的方法, 以js代码的方式进行导航

  • push: 会将URL压入到History记录栈中, 可以通过浏览器前进后退按钮进行操作
  • replace: 不会将URL压入到History记录栈中
  • go(n): -1 退回?
<button @click="handleClick">
  导航到Todo组件
</button>
methods: {
  handleClick() {
    // 导航到/todo组件
    console.log(this.$route) // 保存当前的URL
    if (this.$route.path != '/todo') {
      this.$router.push('/todo')
    }
  },
},

应用- 搭建项目框架

0 需求分析

/login

/article

/user

分析:

  • /login 登录页面
  • / 后台的首页
    • /user 显示用户管理的页面
    • /article 显示文章管理的页面
  • * 404

1 搭建环境

1.1 创建工程

vue create admin-demo

选择 Babel 与Router

1.2 清理文件

  • app.vue
  • src/views
  • src/components
  • src/router/index.js

2 规划路由

2.1 编写路由规则, 多级路由🟢

  • 设置一级路由.
  • 配置home对应路由, 设置二级路由
const routes = [
  //设置一级路由
  //login-登录页
  { path: '/login', component: () => import('@/views/Login') },
  //home-后台首页
  {
    path: '/home',
    component: () => import('@/views/Home'),
    //优化三、设置默认重定向
    redirect: '/home/article',
    children: [
      // 嵌套路由不要写 /，否则会匹配到根路由base路由，写/是 /about, 不写是 /home/about
      { path: 'about', component: () => import('@/views/About') },
      { path: 'user', component: () => import('@/views/User') },
      // webpack分包机制/ 路由懒加载，常用，异步路由加载
      { path: 'Article', component: () => import('@/views/Article') },
      // 优化一： 提供空的子路由，覆盖路由不匹配的情况
      { path: '', component: () => import('@/views/Article') },
    ],
  },
  // 优化二： 默认路由，*要写在最下面
  { path: '*', component: () => import('@/views/NotFound') },
]

2.2 创建对应的组件文件

2.3 改造html (设置路由出口)

  • 编写路由链接 router-link
  • 编写路由出口 router-view

一级路由出口

<template>
  <div id="app">
    <!-- 设置一级路由的出口 -->

    <!-- <router-view></router-view>-->
    <!-- 自闭合的组件（并非dom）写法，只有在使用构建工具时支持，双标签写法更常用 -->
    <router-view />
  </div>
</template>

二级路由出口

<template>
<div class="home-container">
  <aside>
    <ul>
      <router-link to="/home/user"  tag="li">用户</router-link>
      <router-link to="/home/article" tag="li">文章</router-link>
    </ul>
  </aside>
  <main>
    <header></header>
    <!-- 二级路由出口，嵌套路由 -->
    <router-view></router-view>
  </main>
</div>
</template>

<script>
export default {
  name: 'Home',
}
</script>

3 优化

1：默认路由，* 要写在最下面

2：默认重定向

当访问后台首页时, 默认显示某一种信息(通常, 指定一个二级路由)

3：webpack分包机制/ 路由懒加载，常用，异步路由加载

4 实现界面

  1. 实现 login 界面
  2. 实现 404 界面
  3. 实现 home 界面
  • 通过编程式的导航进行页面跳转(组件的切换)
  • 通过 动态路由参数(或localStorage) 进行兄弟组件间的带参跳转
  1. 实现 article 与 user 界面

5 实现菜单点击切换功能

使用router-link渲染li元素, 使其具体点击切换功能

<template>
  <div class="admin-container">
    <aside>
      <ul>
        <router-link to="/user" tag="li">用户管理</router-link>
        <router-link to="/article" tag="li">文章管理</router-link>
      </ul>
    </aside>
    <main>
      <header></header>
      <!-- 设置二级路由的出口 -->
      <router-view></router-view>
    </main>
  </div>
</template>

6 导航守卫🟢

作用:

        校验权限

        守护组件

扩展:

        jwt，用token来解析身份信息，控制登录

//设置全局前置导航守卫（url切换时执行）
router.beforeEach((to, from, next) => {
  // to：到哪个个path去， from： 从哪个path来
  let isLogin = localStorage.getItem('isLogin')

  // 只要用户处于登录状态，直接进入到home首页
  // 如果访问的是'/login'，直接进入/home页
  // 如果访问的不是'/login'，直接调用next() 放行
  if (isLogin) {
    if (to.path == '/login') {
      next('/home')
    } else {
      next()
    }
  } else {
    if (to.path == '/login') {
      next()
    } else {
      // elementUI提供消息提示框
      // $message挂在Vue的原型对象上。Vue的实例可以直接访问，但Vue需要通过prototype访问
      // Message.error('请先登录')
      Vue.prototype.$message({
        message: '请先登录',
        type: 'warning',
        showClose: true,
        duration: 1000,
      })
      // alert('请先登录')
      next('/login')
    }
  }
})
export default router

假以时日♪
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
路由标签之router-view理解
qq_40196248的博客
09-18 2万+
Vue 路由中的 <router-view/> 是用来承载当前级别下的子级路由的一个视图标签，此标签的作用就是显示当前路由级别下一级的页面。 例如： #路由引入 desk.vue 此页面为基础页面，所有页面引入，负责系统的整体布局。 #desk页面分割完成后，将<router-view/>标签写入到实际渲染区域。 #视系统布局而定，左右布局在右侧，上中下布局在中间。 sys-router.js desk.vue 页面渲染部分 上面路由的 path="/i..
Router-view
qq_59076775的博客
05-11 5万+
我们都知道，路由指的是组件和路径的一种映射关系。Router-view也被称为路由的出口,今天我们就探讨下如何去使用路由出口。 也就是: 路径--------------------------------------------------------------->页面 可以把router-view理解成一类代码存放的位置。 一.基本的路由配置(没用子集) 我们都知道所有的组成注册最终在app.vue注册完毕。 通过代码来分析: import Vue from 'vue' im
vue中＜router-view＞使用详解
weixin_45266691的博客
01-09 3561
是 Vue Router 提供的一个用于动态显示匹配到的组件内容的组件。在单页面应用中，页面的切换是通过路由的变化来实现的，而。属性，从而支持命名视图，这在同时展示多个视图的情况下很有用。可以嵌套使用，以支持嵌套路由的场景。是实现动态路由渲染的核心组件，通过合理配置路由和使用。标签，它会根据当前路由的匹配情况动态渲染对应的组件。在上述例子中，路由切换时会产生淡入淡出的过渡效果。负责根据当前路由匹配到的组件渲染相应的内容。标签，每个标签对应一个具体的嵌套路由。在路由配置中，对应的路由定义也需要添加。
router-view 属性介绍
秋来九月八
11-09 2万+
router-view 是 Vue Router 提供的用于显示当前路由组件的组件。它是 Vue Router 的核心组件之一，用于将路由视图与 Vue 应用程序的路由系统关联起来。name属性name属性用来渲染特定组件在路由的js中必须进行相应的配置，才能生效routes: [})根据以上的配置，当radio路由被激活的时候，上面两个标签将会分别渲染Radio1和Radio2这两个组件当路由router没有被激活的时候，这两个标签就不会生效除了 name 属性，通常情况下， 不需要其他属性。
对于＜router-view＞标签的理解
YY的博客
12-02 1万+
对于标签的理解
vue-router.js
12-30
vue路由vue-router.js文件下载
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
Vue-Router的使用方法
12-11
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
vue-router-sitemap通过vue-router配置安装npm i --save vue-router-sitemap示例用法// router.js import VueRout vue-router-sitemap通过vue-router配置生成sitemap.xml安装npm我-保存vue-router-sitemap示例用法//...
vue使用路由router-view
HYNN12的博客
03-21 6947
vue router router-view
vue 路由的内置组件 router-view 详细介绍
ss810540895的博客
07-27 1万+
这时你想一下，我们开头提到的router-view。可以看到我们结果的页面是显示我们在组件中的内容。router-view代码介绍具体实现功能。你是不是好奇他是怎么渲染到那的？，那是因为组件中只能有一个根元素。替换该router-view。替换该router-view。你说我只写了一个div，没错，就是它变成了你的组件。...
router-view 使用
lileLife的博客
12-19 1983
最近用vue写网页，竟然忘了router-view 的使用，时间太久了，还是记录下。 <router-view /> 是一个组件，它与router中的path相关联。可以通过router进而改变<router-view>代表的具体vue页面。 比如在'/Root'对应的页面中使用<router-view>，就需要在router.js中配置Root下 chil...
Vue中的router-view解释
热门推荐
学习学习学习
07-17 18万+
在我们创建项目的时候，可以自然而然的发现，那就是在app.vue这个页面里面存在一个<router-view>的tag标签。通过它，我们点击链接，即可显示出Vue的HelloWorld.vue页面。 那么，到底是什么让HelloWorld.vue页面显示出来，并且它的路由途径和特点呢？ 下面就一一来解释一下： 本质，RouterView【命令视图】和Router...
vue router-view使用详解（vue2）
蓑笠翁
08-14 9万+
vue2 routerView使用详解
基于微信小程序的高校体育互动平台设计与实现
最新发布
07-21
在当前移动互联网技术广泛渗透各行业的背景下，高校体育教育面临着新的发展机遇和挑战。本研究以满足学生多样化体育需求、促进高校体育信息化管理为目标，探索了利用微信小程序等现代技术的体育互动平台设计与实施。通过深入文献回顾和定性、定量研究方法，全面了解了高校学生的体育需求及现有技术解决方案。在微信小程序技术支持下，设计了功能全面、用户友好、安全性高的平台，并多次迭代优化。实际应用和评估显示，该平台为学生提供了信息发布、活动报名、成绩查询和互动交流等综合体育活动管理服务。数据分析表明，相较传统管理方式，平台显著提升了学生体育活动参与度，增强了锻炼意识，同时为教育工作者提供了高效便捷的管理工具。基于微信小程序的高校体育互动平台为体育教育带来新的研究方向和实践机遇，不仅满足学生需求，还为教育工作者提供了灵活、有效的管理工具。 建议高校体育部门深入合作，结合国家政策推广完善该平台，提供培训和技术支持，确保其广泛应用和推广。
vue-router
08-27
import VueRouter from 'vue-router' import Home from './components/Home.vue' import About from './components/About.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

假以时日♪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值