路由巢狀

阿新 • • 發佈：2021-12-23

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--開發環境-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <!--
       1、建立vue路由：為每一個元件分配一個url
        
2、在網頁上挖個坑，用對應的元件來填這個坑
    -->
    <router-view></router-view>
</div>

<!--建立登入元件的模板-->
<template id="loginTemplate">
    <div>
        <h1>登入</h1>
        <form>
            <p>帳號：<input type="text" v-model="account"></p>
            <p>密碼：<input type="text" v-model="password"></p>
            <button type="button" @click="btnLogin">登入</button>
        </form>
    </div>
</template>

<!--註冊元件-->
<template id="regTemplate">
    <div>
        <h1>註冊</h1>
        <form>
            <p>帳號：<input type="text" v-model="account"></p>
            <p>密碼：<input type="text" v-model="password"></p>
            <p>確認密碼：<input type="text" v-model="zpassword"></p>
            <button type="button">註冊</button>
        </form>
    </div>
</template>

<!--使用者父元件-->
<template id="userTemplate">
    <!--要顯示列表，新增  修改-->
    <router-view></router-view>
</template>

<!--列表-->
<template id="userItemTemplate">
    <div>
        <h1>使用者列表元件</h1>
        <button type="button" @click="btnAdd()">新增</button>
        <button type="button" @click="btnUpdate()">修改</button>
        <button type="button" @click="btnLogin()">登入</button>

    </div>

</template>

<!--使用者新增-->
<template id="userAddTemplate">
    <h1>使用者新增元件</h1>
</template>

<!--使用者修改-->
<template id="userUpdateTemplate">
    <h1>使用者修改元件</h1>
</template>


<script>
    // 
登入子元件
    const loginform = {
        template: '#loginTemplate',
        data(){
            return{
                account:'',
                password:''
            }
        },methods:{
            btnLogin(){//登入按鈕觸發的方法
                  //跳轉並傳參
                this.$router.push("/user")
            }
        }
    }

     
//登入子元件
    const regform = {
        template: '#regTemplate',
        data(){
            return{
                account:'',
                password:'',
                zpassword:''
            }
        },methods:{

        }
    }

    //使用者主元件
    const userform = {
        template: '#userTemplate',
        data(){
            return{
                account:'', //接收登入元件給我的值
                pwd:'',
            }
        }
    }

    //使用者列表元件
    const useritemform = {
        template: '#userItemTemplate',
        methods:{
            btnAdd(){
                this.$router.push("/useradd");
            }, btnUpdate(){
                this.$router.push("/userupdate");
            }, btnLogin(){
                this.$router.push("/login");
            }
        }
    }

    //使用者新增元件
    const useraddiform = {
        template: '#userAddTemplate',
    }

    //修改元件
    const userupdateiform = {
        template: '#userUpdateTemplate',
    }

    // 建立 VueRouter 物件
    const router = new VueRouter({
        // 編寫路由規則
        routes: [
            {path:'/',redirect:'/login'},//預設元件  redirect:重定向到指定元件
            { path: "/login", component: loginform },//component:哪個元件，元件名
            { path: "/register", component: regform },//註冊元件
            { path: "/user",
                component: userform,
                children:[
                    {path:'/',redirect:'/useritem'},
                    { path: "/useritem", component: useritemform},
                    { path: "/useradd", component: useraddiform },
                    { path: "/userupdate", component: userupdateiform },
                ]
            }//使用者主元件
        ]
    })

    new Vue({
        el: "#app",
        data() {
            return {

            }
        },router //註冊路由物件
    })
</script>
</body>
</html>

VueRouter路由巢狀

配置巢狀路由要配置巢狀路由，我們需要在配置的引數中使用 children 屬性： {

vue 路由快取路由巢狀路由守衛監聽物理返回操作

最近開發vue專案，遇到的一些問題，這裡整合一下，看到一些部落格已經有寫相關知識，然後自己再次記錄一下。

淺談vue 二級路由巢狀和二級路由高亮問題

第一層路由我寫在app.vue裡面。如圖所示： footer.vue：二級路由是這樣： index.js裡面的配置：

Vue路由巢狀

一、路由配置 vue路由配置首先需要安裝vue-router，然後新增一個js檔案對路由進行管理，在main.js中對路由檔案進行引用

Vue路由巢狀的使用

1.在路由配置頁面中引入元件。 2、在要對應的配置頁面中新增對映關係： const routes = [

vue中路由巢狀的作用

vue中為什麼要有路由巢狀啊，一般的路由不就行了嗎？我們可以看一個很簡單的例子，頁面效果是這樣的：

vue-router使用路由巢狀，二級路由

技術標籤：前端VueJavaScriptvuejsjavascript 一、巢狀路由的使用場景：在選項卡中，頂部有多個導航欄，中間的主體顯示的是內容；這個時候，整個頁面是一個路由，然後點選選項卡切換不同的路由來展示不同的內容

場景類：vue多個router-view路由巢狀

知識點：路由巢狀場景：今天遇到一個需求是這樣的，有一個管理系統的列表頁，點選某一行進入那一行的詳情頁面，於是我想這樣設計路由。主要是在 App.vue 裡套一個 FeedBack ，元件裡面只有 <router-view>來進行

vue-router命名檢視+路由巢狀

有這樣一個需求，頁面分為左右兩個區域，兩個區域的內容可能會各自變化，如果實現開啟頁面左右區域均有內容顯示，且支援單獨變化

【轉】Gin框架之路由分組和路由巢狀

原文：https://www.cnblogs.com/yh2924/p/12383892.html 路由組也可以巢狀，但是需要注意的是當進行巢狀時下一層的需要呼叫Group方法（設定路由字首）是需要用上一層的進行呼叫：

Vue實現路由巢狀的方法例項

1、巢狀路由又稱子路由，在實際應用中，通常由多層巢狀的元件組合而成。（其實就是套娃操作罷了，跟後端的檢視跳轉路徑蠻像的）：

路由巢狀

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>Title</title>

Vue 巢狀路由使用總結（推薦）

開發環境 Win 10 node-v10.15.3-x64.msi 下載地址： https://nodejs.org/en/ 需求場景如下圖，我們希望點選導航欄不同選單時，導航欄下方載入不同的元件，進而展示不同的頁面內容

vue2路由方式--巢狀路由實現方法分析

本文例項講述了vue2巢狀路由實現方法。分享給大家供大家參考，具體如下：前面講過了vue2路由基本用法，一般應用中的路由方式不會像上述例子那麼簡單，往往會出現二級導航這種情況。這時就需要使用巢狀路由這種寫法。

react-router-dom 巢狀路由的實現

入口檔案index.js： import React from \"react\" import ReactDOM from \"react-dom\" import App from \"./App.jsx\"

2020.7.14：巢狀路由、位址列 # 、路由器模式 hash，history，abstract

# 今日學習內容 ##vue-cli2 巢狀路由 1. 在專案案例效果二的基礎上，實現巢狀路由的效果：index.js裡面的子元件的，children:[{},{}] ，子路由會帶著顯示父路由的內容

解決 react-native 巢狀路由 warning

本文地址：https://www.cnblogs.com/veinyin/p/13455113.html 關於巢狀路由報 warning 的問題，官方文件其實在常見問題中已經給出瞭解決方法，檢視這裡

Umi巢狀路由 - 登入邏輯統一處理

當需要在所有頁面加入一些相同的判斷邏輯時，需要用到巢狀路由，比如所有頁面都需要登入，如果沒有登入，跳轉到登入頁面登入完成後，再進入對應的頁面，這個可以在父頁面完成。有兩種方式實現以上功能

Vue中路由的巢狀

main.js import Vue from \'vue\'; import App from \'./App.vue\'; //引入公共的scss注意：建立專案的時候必須用scss

解決vue-router 巢狀路由沒反應的問題

先看下route.js //route.js const App = () => import(\'../App.vue\'); const Login = () => import(\'../component/Login.vue\');

路由巢狀

相關推薦