备案控制台
开发者社区 云计算 文章 正文

Vue3框架中路由的使用和局部刷新的功能(第十一课)

2023-07-16 399
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue3框架中路由的使用和局部刷新的功能(第十一课)

使用 vue-router 的步 骤 :

p第一步：创建路由需要映射的组件（打算显示的页面）；

p第二步：通过createRouter创建路由对象，并且传入routes和history模式；

ü配置路由映射: 组件和路径映射关系的routes数组；

ü创建基于hash或者history的模式；

p第三步：使用app注册路由对象（use方法）；

p第四步：路由使用: 通过<router-link>和<router-view>；

n router-link 事实 上 有很 多 属性 可 以配 置 ：

to 属性：

p是一个字符串，或者是一个对象

replace 属性：

p设置 replace 属性的话，当点击时，会调用 router.replace()，而不是 router.push()；

active-class属性：

p设置激活a元素后应用的class，默认是router-link-active

exact-active-class 属性：

p链接精准激活时，应用于渲染的 <a> 的 class，默认是router-link-exact-active；

编号一

 

编号二

编号三

 

编号四

 

编号五

 

编号六

编号七

编号八

 

用到了文件的信息

路由文件的配置信息

/* eslint-disable indent */
import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'
// 第一步 配置路由的基本信息内容
// 第二步 将路由的必要包文件导入进来
// 第三步 定义变量 配置文件信息
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFpund',
    component: () => import(/* webpackChunkName: "about" */ '../views/NotFpund.vue')
  },
  {
    path: '/two/:id:name',
    name: 'two',
    component: () => import(/* webpackChunkName: "about" */ '../views/Two.vue')
  },
  {
    path: '/four',
    name: 'four',
    component: () => import(/* webpackChunkName: "about" */ '../views/four.vue')
  },
  {
    path: '/abouta',
    name: 'abouta',
    component: () => import(/* webpackChunkName: "about" */ '../views/abouta.vue'),
    children: [
      {
        path: '/abouta/aboutson1',
        name: 'aboutson1',
        component: () => import(/* webpackChunkName: "about" */ '../views/aboutson1.vue')
      },
      {
        path: '/abouta/aboutson2',
        name: 'aboutson2',
        component: () => import(/* webpackChunkName: "about" */ '../views/aboutson2.vue')
      },
      {
        path: '/abouta/aboutson3',
        name: 'aboutson3',
        component: () => import(/* webpackChunkName: "about" */ '../views/aboutson3.vue'),
        children: [
          {
            path: '/abouta/aboutson3/aboutb',
            name: 'aboutb',
            component: () => import(/* webpackChunkName: "about" */ '../views/aboutb.vue')
          },
          {
            path: '/abouta/aboutson3/aboutc',
            name: 'aboutc',
            component: () => import(/* webpackChunkName: "about" */ '../views/aboutc.vue')
          }
        ]
      }
    ]
  },
  {
    path: '/aboutb',
    name: 'aboutb',
    component: () => import(/* webpackChunkName: "about" */ '../views/aboutb.vue')
  },
  {
    path: '/aboutc',
    name: 'aboutc',
    component: () => import(/* webpackChunkName: "about" */ '../views/aboutc.vue')
  },
  {
    path: '/fiver',
    name: 'fiver',
    component: () => import(/* webpackChunkName: "about" */ '../views/fiver.vue')
  },
  {
    path: '/three',
    name: 'three',
    component: () => import(/* webpackChunkName: "about" */ '../views/three.vue'),
    meta: {
      name: 'qhy',
      age: 34
    }
  },
  {
    path: '/about',
    name: 'about',
    // 路由的赖加载技术
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/one',
    name: 'one',
    component: () => import(/* webpackChunkName: "about" */ '../views/One.vue')
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  // history: createWebHashHistory(process.env.BASE_URL),
  routes
})
// 增加一个动态的路由
const addrount = {
  path: '/addrount',
  name: 'addroun',
  component: () => import(/* webpackChunkName: "about" */ '../views/addroun.vue')
}
router.addRoute(addrount)
export default router

控制器文件信息

import { createApp } from 'vue'
import App from './App.vue'
// import App from '../01 状态管理/App.vue'
// 注册状态管理
import store from './store'
// 注册路由
import router from './router'
createApp(App).use(router).use(store).mount('#app')

一级目录

<template>
  <nav>
    <router-link to="/">Home</router-link> &nbsp;&nbsp;&nbsp;
    <router-link to="/about">About</router-link>&nbsp;&nbsp;&nbsp;
    <router-link to="/one">One页面</router-link>&nbsp;&nbsp;&nbsp;
    <router-link to="/two/123456/admiander">Two页面</router-link>&nbsp;&nbsp;&nbsp;
    <router-link to="three">Three页面</router-link>&nbsp;&nbsp;&nbsp;
    <router-link to="four">four页面</router-link>&nbsp;&nbsp;&nbsp;
    <router-link to="fiver" active-class="root">fiver页面</router-link>&nbsp;&nbsp;&nbsp;
    <router-link to="NotFpund">NotFpund</router-link>&nbsp;&nbsp;&nbsp;
    <router-view></router-view>
    <button>我是按钮单机我去往其他的页面</button>
  </nav>
</template>
<script>
export default {
  created () {
    console.log(this.$route)
  }
}
</script>
<style>
*{
  margin-top: 40px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #0080ff;
}
nav {
  padding: 30px;
  font-weight: 700;
  color: darkcyan;
}
nav a {
  font-weight: bold;
  color: #2c3e50;
}
nav a.router-link-exact-active {
  color: #42b983;
}
.root {
  background-color: rgb(0, 0, 0);
  color: green;
}
</style>

二级目录

<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="One">
      <h1>我是One页面的信息数据</h1>
      <h3>Essential Links</h3>
      <ul>
        <router-link to="abouta">关于公司内容</router-link>&nbsp;&nbsp;&nbsp;|
        <router-link to="aboutb">关于注册页面</router-link>&nbsp;&nbsp;&nbsp;|
        <router-link to="aboutc">关于登录页面</router-link>&nbsp;&nbsp;&nbsp;|
        <router-view></router-view>
      </ul>
    </div>
  </template>
  <style scoped>
  *{
    background-color: rgb(50, 169, 14);
    color: white;
    border-radius: 20px;
  }
</style>

三级目录

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="Two">
    <h1>我是abouta页面的信息数据</h1>
    <h3>Ecosystem</h3>
    <h4>abouta页面的介绍</h4>
    <div>
      <router-link to="abouta/aboutson1">aboutson1</router-link>&nbsp;|
      <router-link to="abouta/aboutson2">aboutson2</router-link>&nbsp;|
      <router-link to="abouta/aboutson2">aboutson3</router-link>&nbsp;|
      <router-link to="abouta">关于公司内容</router-link>&nbsp;&nbsp;&nbsp;|
      <router-link to="aboutb">关于注册页面</router-link>&nbsp;&nbsp;&nbsp;|
      <router-link to="aboutc">关于登录页面</router-link>&nbsp;&nbsp;&nbsp;|
      <router-link to="addroun">增加一个路由</router-link>&nbsp;&nbsp;&nbsp;|
      <router-view></router-view>
    </div>
  </div>
</template>
  <style scoped>
* {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  border-radius: 20px;
}
</style>

四级目录

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="aboutason2">
    <h1>我是aboutason2页面的信息数据</h1>
    <h3>Ecosystem</h3>
    <h4>abouta页面的介绍</h4>
    <router-link to="abouta">关于公司内容</router-link>&nbsp;&nbsp;&nbsp;|
    <router-link to="aboutb">关于注册页面</router-link>&nbsp;&nbsp;&nbsp;|
    <router-link to="aboutc">关于登录页面</router-link>&nbsp;&nbsp;&nbsp;|
    <router-view></router-view>
  </div>
</template>

一级目录的其他文件

<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="Two">
      <h1>我是Two页面的信息数据</h1>
      <h3>Ecosystem</h3>
    </div>
  </template>
  <style scoped>
  *{
    background-color: rgb(13, 0, 255);
    color: rgb(206, 9, 9);
    border-radius: 20px;
  }
</style>
<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="Three">
      <h1>我是Three页面的信息数据</h1>
      <h3>Ecosystem</h3>
    </div>
  </template>
  <style scoped>
  *{
    background-color: rgb(174, 234, 10);
    color: rgb(255, 255, 255);
    border-radius: 20px;
  }
</style>
<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="four">
      <h1>我是Four页面的信息数据</h1>
      <h3>Ecosystem</h3>
    </div>
  </template>
  <style scoped>
  *{
    background-color: rgb(0, 68, 105);
    color: rgb(255, 0, 0);
    border-radius: 20px;
  }
</style>
<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="Fiver">
      <h1>我是Fiver页面的信息数据</h1>
      <h3>Ecosystem</h3>
    </div>
  </template>
  <style scoped>
  *{
    background-color: rgb(255, 0, 195);
    color: rgb(81, 0, 255);
    border-radius: 20px;
  }
</style>
<template>
    <h2>Not Fund:{{ $route.params.pathMatch}}</h2>
</template>

二级目录的其他文件

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="Two">
    <h1>我是abouta页面的信息数据</h1>
    <h3>Ecosystem</h3>
    <h4>abouta页面的介绍</h4>
    <div>
      <router-link to="abouta/aboutson1">aboutson1</router-link>&nbsp;|
      <router-link to="abouta/aboutson2">aboutson2</router-link>&nbsp;|
      <router-link to="abouta/aboutson2">aboutson3</router-link>&nbsp;|
      <router-link to="abouta">关于公司内容</router-link>&nbsp;&nbsp;&nbsp;|
      <router-link to="aboutb">关于注册页面</router-link>&nbsp;&nbsp;&nbsp;|
      <router-link to="aboutc">关于登录页面</router-link>&nbsp;&nbsp;&nbsp;|
      <router-link to="addroun">增加一个路由</router-link>&nbsp;&nbsp;&nbsp;|
      <router-view></router-view>
    </div>
  </div>
</template>
  <style scoped>
* {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  border-radius: 20px;
}
</style>
<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="Two">
      <h1>我是aboutb页面的信息数据</h1>
      <h3>Ecosystem</h3>
    </div>
  </template>
  <style scoped>
  *{
    background-color: rgb(236, 235, 255);
    color: rgb(25, 141, 44);
    border-radius: 20px;
  }
</style>
<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="Two">
      <h1>我是aboutc页面的信息数据</h1>
      <h3>Ecosystem</h3>
    </div>
  </template>
  <style scoped>
  *{
    background-color: rgb(236, 235, 255);
    color: rgb(57, 132, 218);
    border-radius: 20px;
  }
</style>

关键词：
路由VUE.js
功能VUE.js
vue3功能VUE.js
vue3路由VUE.js
VUE.js路由
t75yjb52rsccc
目录
相关文章
向画
|
1天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
向画
10 0
老板这功能得加钱
|
1天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
老板这功能得加钱
8 0
yqcoder
|
1天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通（中）
Vue3 官方文档速通（中）
yqcoder
7 0
yqcoder
|
1天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通（上）
Vue3 官方文档速通（上）
yqcoder
5 0
yqcoder
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之五：Pinia 状态管理
Vue3+Vite+Pinia+Naive后台管理系统搭建之五：Pinia 状态管理
yqcoder
6 1
yqcoder
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之三：vue-router 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之三：vue-router 的安装和使用
yqcoder
6 0
yqcoder
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之二：scss 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之二：scss 的安装和使用
yqcoder
5 0
yqcoder
|
1天前
|
JavaScript 前端开发 API
Vue3 系列：从0开始学习vue3.0
Vue3 系列：从0开始学习vue3.0
yqcoder
8 1
yqcoder
|
1天前
|
网络架构
Vue3 系列：vue-router
Vue3 系列：vue-router
yqcoder
6 2
yqcoder
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之一：基础项目构建
Vue3+Vite+Pinia+Naive后台管理系统搭建之一：基础项目构建
yqcoder
6 1

热门文章

最新文章

  • 1
    vue项目开发笔记记录（一）
  • 2
    vue项目实战：实战技巧总结（中）
  • 3
    vue项目开发笔记记录（二）
  • 4
    vue项目使用可选链操作符编译报错问题
  • 5
    vue项目开发笔记记录（四）
  • 6
    乾坤子应用配置(vue3+vite)
  • 7
    vue3+vite项目配置ESlint
  • 8
    vue3+threejs+koa可视化项目——实现登录注册（第三步）
  • 9
    Vue的路由管理：VueRouter的配置和使用
  • 10
    vue3+threejs可视化项目——搭建vue3+ts+antd路由布局（第一步）
  • 1
    在vue中，怎样理解 Vue 的单向数据流？
    24
  • 2
    在vue中，Class 与 Style 如何动态绑定？
    18
  • 3
    在vue中，v-show 与 v-if 有什么区别？
    25
  • 4
    在vue中，如何实现SPA单页面应用的路由管理？
    24
  • 5
    在vue中，说说你对 SPA 单页面的理解，它的优缺点分别是什么？
    43
  • 6
    解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题
    81
  • 7
    Vue中el与data的两种写法
    19
  • 8
    Vue之数据绑定
    15
  • 9
    使用Vue.js、Vuetify和Netlify构建现代化的响应式网站
    47
  • 10
    初识Vue 输出Hello World 及注意事项
    24

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门教程开发文档
  • 零基础学前端HTML+CSS
  • React 入门与实战

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考