admin管理员组文章数量:1633922
vue路由配置的介绍
内容：
页面关系如何管理？
路由
路由：
Vue中，我们可以通过vue-router路由管理页面之间的关系，让Vue.js构建单页面应用变得更加容易
操作步骤：
第一步：准备
安装路由npm install --save vue-router
准备两个简单的组件，放在src/view下
第二步：
在src/router/index.js
// 引入路由
import { createRouter, createWebHashHistory } from "vue-router";
// 引入页面
import baseView from "../view/baseView"
import aboutView from "../view/aboutView"
// 配置信息中需要的页面相关配置
//配置页面
const routes = [
{
path:"/", //访问的路径
component: baseView //对应的组件
},
{
path:"/about", //访问的路径
component: aboutView //对应的组件
}
]
// 创建路由
const router = createRouter({
// 访问方式
//
/*
createWebHashHistory
bash: http://localhost:8080/#/
about:http://localhost:8080/#/about
原理：a标签锚点连接
*/
/*
createWebHistory
bash: http://localhost:8080/
about:http://localhost:8080/about
此种方式，需要后台配合做重定向，否则会出现404问题
原理：H5 pushState()
*/
history:createWebHashHistory(),
// 路由配置信息
routes
})
export default router第三步：
引入路由到项目
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from "./router" // index.js 是默认访问
// 明确安装路由功能
createApp(App).use(router).mount('#app')
第四步：
指定路由显示入口
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'HelloWorld',
}
</script>
此时，可以通过输入不同的路由地址进行访问
第五步：
指定路由跳转，实现导航功能
<template>
<router-view></router-view>
<router-link to='/'>Base </router-link>
<router-link to='/about'> About</router-link>
</template>
<script>
export default {
name: 'HelloWorld',
}
</script>
总结
通过路由配置，实现导航功能
本文标签： 路由
版权声明：本文标题：38.Vue3：引入路由配置 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1729176506a1188786.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论