vue-router實現(xiàn)簡單vue多頁切換、嵌套路由、路由跳轉的步驟和報錯

更新時間：2024年05月11日 09:58:51 作者：June_YYang

最近學習到VUE路由這塊,發(fā)現(xiàn)這塊知識點有點多,好容易混亂,這篇文章主要介紹了vue-router實現(xiàn)簡單vue多頁切換、嵌套路由、路由跳轉的步驟和報錯的相關資料,需要的朋友可以參考下

一、安裝vue-router

npm i vue-router@3.6.5          //npm
//or
yarn add vue-router@3.6.5       //yarn

查看項目依賴中是否有vue-router

二、引入vue-router實現(xiàn)路由切換

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

Home.vue示例

<template>
  <h1>Home</h1>
</template>
<script>
export default {
  data() {
    return {}
  },
}
</script>

User.vue示例

<template>
  <h1>Users</h1>
</template>
<script>
export default {
  data() {
    return {}
  },
}
</script>

在index.js文件中寫以下代碼：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import User from '../views/User.vue'
import Main from '../views/Main.vue'
Vue.use(VueRouter)
//1、創(chuàng)建路由組件

將路由與組件進行映射

const routes = [
  { path: '/home', component: Home },
  { path: '/user', component: User },
]

創(chuàng)建 router 實例，然后傳 `routes` 配置，你還可以傳別的配置參數(shù), 不過先這么簡單著吧。

const router = new VueRouter({
  routes, // (縮寫) 相當于 routes: routes
})
export default router

在app.vue中寫以下代碼：

<template>
  <div id="app">
    <!-- 路由出口 -->
    <!-- 路由匹配到的組件將渲染在這里 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

三、嵌套路由

編寫router|index.js,添加引入、映射

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import User from '../views/User.vue'
import Main from '../views/Main.vue'
Vue.use(VueRouter)
//1、創(chuàng)建路由組件
//2、將路由與組件進行映射
const routes = [
  //主路由
  {
    path: '/',
    component: Main,
    children: [
      //子路由
      { path: '/home', component: Home },
      { path: '/user', component: User },
    ],
  },
  { path: '/home', component: Home },
  { path: '/user', component: User },
]
// 3. 創(chuàng)建 router 實例，然后傳 `routes` 配置
// 你還可以傳別的配置參數(shù), 不過先這么簡單著吧。
const router = new VueRouter({
  routes, // (縮寫) 相當于 routes: routes
})
export default router

編寫側邊欄樣式

編寫Main.vue文件

<template>
  <div>
    //頁面布局
    <el-container>
      <el-aside width="200px">
        <common-aside />
      </el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>
          <!-- 路由出口 -->
          <!-- 路由匹配到的組件將渲染在這里 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import CommonAside from '../components/CommonAside.vue'// 引入側邊欄組件(main.vue的樣式)
export default {
  data() {
    return {}
  },
  //引入組件
  components: {
    CommonAside,
  },
}
</script>

四、路由跳轉

在菜單標簽中添加click事件：

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

在views文件夾中新建相關菜單文件，如第二節(jié)所示?；氐絩outer|index.js文件，添加引入、映射

可以對首頁進行重定向，當點擊首頁時，瀏覽器地址為“/”，但是首頁是“/home”，重定向操作如下:

五、相關報錯

eslint報錯

在vue.config.js中編寫如下代碼關閉eslint校驗：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, //關閉eslint校驗
})