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

使用vue-router的步骤:

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

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

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

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

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

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

nrouter-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>