Vue中的巢狀路由

白头吟發表於2024-11-29
Vue巢狀路由

一、Vue中的巢狀路由

1.App.vue中的程式碼

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

2.router/index.js: children中的子路由，path 不加 '/',訪問main,先獲取main對應的元件，對應的路由出口在App.vue中，redirect的屬性值為訪問 父元件時，會強制訪問父元件下某個子元件，該元件對應的路由出口在父元件中

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

// 路由中的檔案載入對應的是app.vue的路由出口
// 路由中的檔案的子檔案載入對應的是該檔案中的路由出口
//      如：main下面的news的載入，是在main中的routerview中顯示的
const routes = [
  {
    path: '/login',
    component:  () => import( '../views/LoginView.vue')
  },
  {
    path: '/main',
    component:  () => import( '../views/MainView.vue'),
    redirect:'/main/news',
    children:[
      {
        path: 'home',
        name: 'home',
        component: HomeView
      },
      {
        path: 'about',
        name: 'about',
        component: () => import( '@/views/AboutView.vue')
      },
      {
        path: 'news',
        component: () => import('@/views/NewsView.vue')
      },
      {
        path: 'editor',
        component: () => import('@/views/EditorView.vue')
      },
      {
        path: 'product',
        component: () => import('@/views/ProductView.vue')
      },
      {
        path: 'case',
        component: () => import('@/views/CaseView.vue')
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3.LoginView.vue

<template>
    <div>
        <h1>登入</h1>
        {{ $store.state.token }}
        <el-form ref="form" :rules="rules"  :model="form" label-width="80px">
            <el-form-item label="賬號" prop="username">
                <el-input v-model.trim="form.username" ></el-input>
            </el-form-item>
            <el-form-item label="密碼" prop="password">
                <el-input type="password" v-model="form.password" ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">登入</el-button>
            </el-form-item>
       </el-form>
    </div>
</template>

<script>
    export default {
        methods:{
            onSubmit(){
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$store.dispatch('setTokenAsync',this.form);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },
        data(){
            return {
                form:{},
                rules: {
                    username: [
                        { required: true, message: '請輸入賬號', trigger: 'blur' },
                        { min: 2, max: 20, message: '長度在 2 到 20 個字元', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '請輸入密碼', trigger: 'blur' }
                    ]
                 }
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>

4.MainView.vue： 在MainView.vue中，訪問對應的子路由時，to='/父元件訪問時對應的path/子元件對應的path',此時訪問的子元件 ，顯示對應的路由出口在MainView.vue檔案中。

<template>
    <div>
        <!-- MainView.vue頁面對應的路由出口在app.vue -->
        <nav>
            <router-link to="/main/home">Home</router-link> |
            <router-link to="/main/about">About</router-link> |
            <router-link to="/main/news">新聞列表</router-link> |
            <router-link to="/main/product">產品列表</router-link> |
            <router-link to="/main/case">案例列表</router-link>|
            <router-link to="/main/editor">編輯器</router-link> 
        </nav>
        <!-- 點選MainView.vue頁面上的連結，對應的檢視對應的路由出口在這裡 -->
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        
    }
</script>

5.頁面效果

訪問login

訪問main

相關文章