vue路由配置(vue3.0路由配置)

vue路由配置 1、路由的使用一、安装路由npm i vue-router二、配置路由

推荐整理分享vue路由配置(vue3.0路由配置)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue的路由器,Vue路由配置的页面加不出来,Vue路由配置的页面加不出来,vue3.0路由配置,vue路由配置文件,vue路由配置文件保存在项目的哪个文件夹的哪个文件内,vue路由配置文件保存在项目的哪个文件夹的哪个文件内,vue路由配置文件,内容如对您有帮助，希望把文章链接给更多的朋友！

在根目录下创建文件夹router，在router文件夹下创建index.js文件，如下图所示

在index.js文件中写入如下代码，实现创建一个路由器

import VueRouter from "vue-router"import student from '../view/student'import school from '../view/school'const router=new VueRouter({ routes:[ //配置路由的路径 { path:'/student', component:student }, { path:'/school', component:school } ]})export default router;

 如上图，配置好了一个路由器，里面包含了2个路由，分别为student，school 路由

三、路由使用

在跟目录下创建view或者page文件夹，创建student，school两个路由（vue文件），如下图

 在main.js中注册路由

import Vue from 'vue'import App from './App.vue'import router from './router'import VueRouter from 'vue-router'Vue.use(VueRouter)Vue.config.productionTip = falsenew Vue({ el:'#app', render: h => h(App), router:router})

编辑student.vue路由

<template> <div> 我是学生路由 </div></template><script>export default {}</script><style></style>

编辑school.vue路由

<template> <div> 我是学校路由 </div></template><script>export default {}</script><style></style>

在app.vue中进行路由的使用

<template> <div> <router-link to="/student">到学生路由</router-link> <router-link to="/school">到学校路由</router-link> <div> <h1>以下是展示区域</h1> <router-view></router-view> </div> </div></template><script>export default { name: 'App',}</script><style></style>四、效果呈现

当点击到学生路由时，如下图

当点击学校路由时，如下图

 

 2、路由升级一、嵌套路由的编写

在router文件夹下的index.js文件中进行修改，同时要引入person，animal路由（与student，school路由一样引入）

注意：student下了子路由中的path没有“/”

注意：student下了子路由中的path没有“/”

注意：student下了子路由中的path没有“/”

routes:[ //配置路由的路径 { path:'/student', component:student, children:[ { path:'person', component:person }, { path:'animal', component:animal } ] }, { path:'/school', component:school } ]

同时在view文件夹下建立person,animal组件，如下图

 在person,animal路由增加标识

 因为person，animal路由都是student下的子路由，所以在student.vue下进行修改

注意：子路由的跳转要加入父路由的路径！！！

<template> <div class="students"> 我是学生路由<br> <router-link to="/student/person">到person路由</router-link><br> <router-link to="/student/animal">到animal路由</router-link> <div> 这里时student路由的子路由展示 <router-view></router-view> </div> </div></template><script>export default {}</script><style>.students{ background-color: pink;}</style> 二、效果展示

进入学生路由后的初始状态

当点击person路由时

 

 当点击animal路由时

 注意地址栏的路径，有#，/student/animal