vue.js 二級路由/三級路由
為什麼要用二級和三級路由?
當專案中 有多個 <router-view> 時,就必須使用分級路由;
如果路由不分級,又有多個 <router-view> ,全部都是定義為一級路由,那麼專案中的 <router-view> 的內容顯示就會混亂;這是不友好的;
如果對路由進行分級,那麼當觸發某個二級或三級路由時,此路由就會將對應元件內容傳給自己的父級路由元件裡面的 <router-view>,這樣就不會混亂;
一級路由被觸發時,自然會找自己所註冊的根元件的<router-view>
二級路由
為一級路由新增一個 children 屬性陣列,並將二級路由放入;
path 屬性 決定 跳轉後 url 位址列的的顯示
//main.js //一級路由 import About from './components/about/About' //二級路由 import Contact from './components/about/Contact' import Delivery from './components/about/Delivery' import History from './components/about/History' import OrderingGuide from './components/about/OrderingGuide' const router= new VueRouter({ routes:[ {path:'/about',name:'about',component:About,children:[ {path:'/about/contsssssssssssssssact',name:'contactLink',component:Contact}, {path:'/history',name:'historyLink',component:History}, {path:'/',name:'deliveryLink',component:Delivery}, {path:'/orderingGuide',name:'orderingGuideLink',component:OrderingGuide}, ]}, {path:'*',redirect:'/'} ], mode:"history" });
三級路由
和二級路由差不多
const router= new VueRouter({ routes:[ {path:'/',name:'home',component:Home}, {path:'/menu',name:'menu',component:Menu}, {path:'/admin',name:'admin',component:Admin}, {path:'/about',name:'about',component:About,redirect: {name:'contactLink'},children:[ //二級路由 {path:'/about/contact',name:'contactLink',component:Contact}, {path:'/history',name:'historyLink',component:History}, {path:'/delivery',name:'deliveryLink',component:Delivery}, {path:'/orderingGuide',name:'orderingGuideLink',component:OrderingGuide,redirect:{name:'phonelink'},children: [ //三級路由 {path:'/phone',name:'phonelink',component:Phone}, {path:'/name',name:'namelink',component:Name} ]}, ]}, {path:'/login',name:'login',component:Login}, {path:'/register',name:'register',component:Register}, {path:'*',redirect:'/'} ], mode:"history" });
相關推薦
vue.js 二級路由/三級路由
為什麼要用二級和三級路由? 當專案中 有多個 <router-view> 時,就必須使用分級路由; 如果路由不分級,又有多個 <router-view> ,全部都是定義為一級路由,那麼專案中的 <router-view> 的內容顯示就
Vue.js 相關知識(路由)
system 區分 ext htm 文件 children 對象 9.png 下載地址 1. 簡介 路由,工作原理與路由器相似(路由器將網線總線的IP分發到每一臺設備上),Vue中的路由根據用戶在網頁中的點擊,將其引導到對應的頁面。 2. 使用步驟 安裝vue-router
[vue]模擬移動端三級路由
頁面 分享圖片 utf-8 out div app 內容 alt modules 頁面邏輯 實現代碼 <!DOCTYPE html> <html lang="en"> <head> <meta char
Vue js 中的動態路由
在文章 使用vue-router完成簡單導航功能 中實現的路由導航功能是不能傳遞引數的,也就是說是靜態路由。而能傳遞引數的路由模式,由於可以傳遞引數,所以其對應的路由數量是不確定的,故稱之為 動態路由那麼如何將引數作為路由呢? 在引數名前面加上 : ,然後將引數寫在
vue.js實現省市區三級聯動
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>vue實現省市級三級聯動</title> <script src="vue.min.js"
vue.js一級、二級、重定向路由配置
方法一 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="
vue.js路由
() 組件 其他 文檔 script 不同 -c target pre Vue.js 路由 Vue.js 路由允許我們通過不同的 URL 訪問不同的內容。 通過 Vue.js 可以實現多視圖的單頁Web應用(single page web application,SPA)。
vue.js路由參數簡單實例講解------簡單易懂
.com route 安裝 http git node clas span ont vue中,我們構建單頁面應用時候,一定必不可少用到vue-router vue-router 就是我們的路由,這個由vue官方提供的插件 首先在我們項目中安裝vue-router路由依賴
vue之二級路由
樣式 幫助 return ... ldr 註意 ima ack help 一 樣式 1 在一個vue組件,<template></template>中,在加入<router-view></router-view>
vue.js-路由
import end this theme str The ram class color 1:編寫router.js import Router from "vue-router" import Vue from "vue" import router from ".
vue.js路由vue-router(一)——簡單路由基礎
styles mounted num 前言 vue.js ren main.c -s col 前言 vue.js除了擁有組件開發體系之外,還有自己的路由vue-router。在沒有使用路由之前,我們頁面的跳轉要麽是後臺進行管控,要麽是用a標簽寫鏈接。使用vue-rout
vue.js add query 並 返回走這個路由呢?
true use add router 分享 objc mage 一點 tor 讓這個老實返回的頁面添加特殊路由,這個頁面常常都是登錄註冊。這次我們根據登錄舉例。 省略 { path:‘/login?url=:url‘, name:‘lo
vue.js通過路由跳轉傳參,重新整理頁面引數丟失
問題:vue.js路由跳轉,跳轉頁面重新整理後引數丟失,沒有資料,怎麼解決?? 出現的情況:從新聞列表頁面進入某一條新聞得詳情頁,需要在路由跳轉時給詳情頁面傳送該條新聞得ID,然後詳情頁獲取ID想後臺請求資料將內容展示,還有商品詳情頁等等~ 下面寫了一個小例子,是模擬專案的新聞列表和詳情頁,
Vue.js框架--路由模組化(二十六)
主要操作技能: 1>建立資料夾\router.js檔案 2>寫入相關路由配置 router.js import Vue from 'vue' //0. 使用路由 import VueRouter from 'vue-
Vue.js之路由系統
Vue.js生態之vue-router vue-router是什麼? vue-router是Vue的路由系統,定位資源的,我們可以不進行整頁重新整理去切換頁面內容。 vue-router的安裝與基本配置 vue-router.js 可以下載 也可以用cdn,基本配置資訊看如下程式碼 // ht
Vue.js 路由
官方路由 對於大多數單頁面應用,都推薦使用官方支援的 vue-router 庫。更多細節可以看 vue-router 文件。 從零開始簡單的路由 如果只需要非常簡單的路由而不需要引入整個路由庫,可以動態渲染一個頁面級的元件像這樣: con
使用vue.js路由踩到的一個坑Unknown custom element
在配合require.js使用vue路由的時候,遇到了路由元件報錯: “vue.js:597 [Vue warn]: Unknown custom element: <router-link> - did you register the component corre
Vue.js框架--路由程式設計式的導航 和History 模式(十九)
主要操作技能: 一、程式設計式的導航 除了使用 <router-link> 建立 a 標籤來定義導航連結, 我們還可以藉助 router 的例項方法,通過編寫程式碼來實現 點選 <router-link :to="..."&g
Vue.js路由管理器 Vue Router
起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/v
「Vue.js」Vue-Router + Webpack 路由懶載入實現
一.前言 當打包構建應用時,Javascript 包會變得非常大,影響頁面載入。如果我們能把不同路由對應的元件分割成不同的程式碼塊,然後當路由被訪問的時候才載入對應元件,這樣就更加高效了。結合 Vue 的非同步元件和 Webpack 的程式碼分割功能,輕鬆實現路由元件的懶載入.