vue-router实现简单vue多页切换、嵌套路由、路由跳转的步骤和报错

哈有劲

官方说明文档：
介绍 | Vue Router (vuejs.org)

vue3选择V4.x，vue2选择V3.x

一、安装vue-router

1. npm i vue-router@3.6.5          //npm
   
2. //or
   
3. yarn add vue-router@3.6.5       //yarn

复制代码

查看项目依赖中是否有vue-router

二、引入vue-router实现路由切换

在src文件夹中新建router文件夹，新建index.js文件等等（main.vue是嵌套路由，后期讲）

Home.vue示例

1. <template>
   
2.   <h1>Home</h1>
   
3. </template>
   
4. <script>
   
5. export default {
   
6.   data() {
   
7.     return {}
   
8.   },
   
9. }
   
10. </script>

复制代码

User.vue示例

1. <template>
   
2.   <h1>Users</h1>
   
3. </template>
   
4. <script>
   
5. export default {
   
6.   data() {
   
7.     return {}
   
8.   },
   
9. }
   
10. </script>

复制代码

在index.js文件中写以下代码：

1. import Vue from 'vue'
   
2. import VueRouter from 'vue-router'
   
3. import Home from '../views/Home.vue'
   
4. import User from '../views/User.vue'
   
5. import Main from '../views/Main.vue'
   
6. Vue.use(VueRouter)
   
7. //1、创建路由组件

复制代码

将路由与组件进行映射

1. const routes = [
   
2.   { path: '/home', component: Home },
   
3.   { path: '/user', component: User },
   
4. ]

复制代码

创建 router 实例，然后传 `routes` 配置，你还可以传别的配置参数, 不过先这么简单着吧。

1. const router = new VueRouter({
   
2.   routes, // (缩写) 相当于 routes: routes
   
3. })
   
4. export default router

复制代码

在app.vue中写以下代码：

1. <template>
   
2.   <div id="app">
   
3.     <!-- 路由出口 -->
   
4.     <!-- 路由匹配到的组件将渲染在这里 -->
   
5.     <router-view></router-view>
   
6.   </div>
   
7. </template>
   
8. 
   
9. <script>
   
10. export default {
    
11.   name: 'App',
    
12. }
    
13. </script>

复制代码

三、嵌套路由

编写router|index.js,添加引入、映射

1. import Vue from 'vue'
   
2. import VueRouter from 'vue-router'
   
3. import Home from '../views/Home.vue'
   
4. import User from '../views/User.vue'
   
5. import Main from '../views/Main.vue'
   
6. Vue.use(VueRouter)
   
7. //1、创建路由组件//2、将路由与组件进行映射const routes = [  //主路由  {    path: '/',    component: Main,    children: [      //子路由      { path: '/home', component: Home },      { path: '/user', component: User },    ],  },  { path: '/home', component: Home },  { path: '/user', component: User },]// 3. 创建 router 实例，然后传 `routes` 配置// 你还可以传别的配置参数, 不过先这么简单着吧。const router = new VueRouter({
   
8.   routes, // (缩写) 相当于 routes: routes
   
9. })
   
10. export default router

复制代码

编写侧边栏样式

编写Main.vue文件

1. <template>
   
2.   <div>
   
3.     //页面布局
   
4.     <el-container>
   
5.       <el-aside width="200px">
   
6.         <common-aside />
   
7.       </el-aside>
   
8.       <el-container>
   
9.         <el-header>Header</el-header>
   
10.         <el-main>
    
11.           <!-- 路由出口 -->
    
12.           <!-- 路由匹配到的组件将渲染在这里 -->
    
13.           <router-view></router-view>
    
14.         </el-main>
    
15.       </el-container>
    
16.     </el-container>
    
17.   </div>
    
18. </template>
    
19. 
    
20. <script>
    
21. import CommonAside from '../components/CommonAside.vue'// 引入侧边栏组件(main.vue的样式)
    
22. export default {
    
23.   data() {
    
24.     return {}
    
25.   },
    
26.   //引入组件
    
27.   components: {
    
28.     CommonAside,
    
29.   },
    
30. }
    
31. </script>

复制代码

四、路由跳转

在菜单标签中添加click事件：

在script部分中的methods添加clickMenu方法

在views文件夹中新建相关菜单文件，如第二节所示。回到router|index.js文件，添加引入、映射

可以对首页进行重定向，当点击首页时，浏览器地址为“/”，但是首页是“/home”，重定向操作如下:

五、相关报错

eslint报错
在vue.config.js中编写如下代码关闭eslint校验：

1. const { defineConfig } = require('@vue/cli-service')
   
2. module.exports = defineConfig({
   
3.   transpileDependencies: true,
   
4.   lintOnSave: false, //关闭eslint校验
   
5. })

复制代码

总结

到此这篇关于vue-router实现简单vue多页切换、嵌套路由、路由跳转的步骤和报错的文章就介绍到这了,更多相关vue-router多页切换、嵌套路由、路由跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/320934ldn.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！