vue-router： 巢狀路由
模板抽離
我們已經學習過了Vue模板的另外定義形式，使用<template></template>。
<!-- 模板抽離出來 -->
<template id="home">
<div>首頁</div>
</template>
<template id="news">
<div>新聞</div>
</template>然後js裡定義路由元件的時候：
// 1. 定義（路由）元件。 路由巢狀
實際應用介面，通常由多層巢狀的元件組合而成。
比如，我們 “首頁”元件中，還巢狀著 “登入”和 “註冊”元件，那麼URL對應就是/home/login和/home/reg。
<template id="home">
<!-- 注意：元件只能有一個根元素，所以我們包裝到這個div中 -->
<div>
<h2 這是訪問/home後的模板，其中我們需要把/home/login
/home/reg渲染進來。 完成上面程式碼後，HTML結構如下圖：
- 登入和註冊2個元件
<template id="login">
<div>登入介面</div>
</template>
<template id="reg">
<div>註冊介面</div>
</template>//定義路由元件
const Login = { template: '#login' };
const Reg = { template: '#reg' };3.定義路由
// 2. 定義路由
const routes = [
{ path: '/', redirect: '/home' },
{
path: '/home',
component: Home,
children:[
{ path: '/home/login', component: Login},
{ path: '/home/reg', component: Reg}
]
},
{ path: '/news', component: News}
]注意我們在home路由配置了它的children。這就是巢狀路由。
4.案例全部程式碼如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="box">
<p>
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
</p>
<router-view></router-view>
</div>
<!-- 模板抽離出來 -->
<template id="home">
<!-- 注意：元件只能有一個根元素，所以我們包裝到這個div中 -->
<div>
<h2>首頁</h2>
<router-link to="/home/login">登入</router-link>
<router-link to="/home/reg">註冊</router-link>
<!-- 路由匹配到的元件將渲染在這裡 -->
<router-view></router-view>
</div>
</template>
<template id="news">
<div>新聞</div>
</template>
<template id="login">
<div>登入介面</div>
</template>
<template id="reg">
<div>註冊介面</div>
</template>
<script type="text/javascript">
// 1. 定義（路由）元件。
const Home = { template: '#home' };
const News = { template: '#news' };
const Login = { template: '#login' };
const Reg = { template: '#reg' };
// 2. 定義路由
const routes = [
{ path: '/', redirect: '/home' },
{
path: '/home',
component: Home,
children:[
{ path: '/home/login', component: Login},
{ path: '/home/reg', component: Reg}
]
},
{ path: '/news', component: News}
]
// 3. 建立 router 例項，然後傳 `routes` 配置
const router = new VueRouter({
routes // （縮寫）相當於 routes: routes
})
// 4. 建立和掛載根例項。
// 記得要通過 router 配置引數注入路由，
// 從而讓整個應用都有路由功能
const app = new Vue({
router
}).$mount('#box')
// 現在，應用已經啟動了！
</script>
</body>
</html>
相關推薦
vue-router： 巢狀路由
模板抽離 我們已經學習過了Vue模板的另外定義形式，使用<template></template>。 <!-- 模板抽離出來 --> <template id="home">
vue-router的巢狀路由，重定向和別名
1.命名路由 有時候，通過一個名稱來標識一個路由顯得更方便一些，特別是在連結一個路由，或者是執行一些跳轉的時候。你可以在建立 Router 例項的時候，在 routes 配置中給某個路由設定名稱。我個人理解就相當於給路徑取個名字，呼叫的時候，這個名字就指這個路徑，不
第3篇：angularJS使用ui-router的巢狀路由配置
引入js檔案： <script type="text/javascript" src="lib/angular/angular-1.3.0.js"></script>
4.2react-router實現巢狀路由
import {BrowserRouter, Route, Switch, Link}from 'react-router-dom'; class demo extends React.Component { render() { return (
vue—router巢狀路由設定及預設選擇
巢狀路由 應用場景：用vue-router 設定一個頁面的路由的時候，在其頁面元件內也需要用到，用一個專案來舉例子 我在app.vue中設定路由出口對其他頁面元件.設定路徑，比如home 首頁設定，在router資料夾index.js中設定 routes: [ { path:
Vue router 路由巢狀 路由重定向 路由別名 router-link傳引數
<template> <div> 這是商品列表頁面 <router-link :to="{ name: 'title'}">標題</router-link> <router-link to="/good
Vue-router學習筆記——遇到的坑（一）history模式重新整理/設定巢狀路由顯示404/cannot find（webpack配置）
前端路由有兩種，一種是hash模式，一種是history模式。 這兩種模式的url路徑都不需要真實存在，只需要為前端跳轉做一個顯示。 hash模式的url路徑會帶有#，看起來不太舒服且不好做SEO，但是因為瀏覽器向伺服器請求時會自動忽略#後面的值，所以在瀏覽器中重新整理還是
vue2.0子路由配置和跳轉 vue-router: 巢狀路由
路由跳轉 <li class="nav_li" v-link="{ path: '/home/reg'}"></li> <router-link to="/home/reg">註冊</router-link> this.
Vue-router巢狀路由的使用
路由使用的時候需要設定路由的路徑： ew Router({ // mode: 'abstract', routes: [ { path: '/top', component: Top }, { path: '/new', component: New
Vue+vue-router+Webpack4模擬登陸跳轉和巢狀路由功能（非vue-cli）
Webpack實現的功能 打包和輸出html 打包，分離，壓縮和輸出css檔案 vue模板解析 自定義輸出js檔案路徑和名稱等 demo的基本功能 使用vue-router模擬登陸和跳轉 vue-router巢狀路由模擬登陸後切換頁面 packag
vue-router中定義動態路由、巢狀路由，並動態獲取引數
路由的定義，主要有以下幾步： 如果是模組化機制，需要呼叫 Vue.use(VueRouter) 定義路由元件，如： const Foo = { template: '<div>foo</div>' }; 定義路由（陣列）：
vue-router菜鳥進階！(巢狀路由VS命名路由)
巢狀路由 一個被渲染元件可以包含自己的巢狀< router-view >。 要在巢狀的出口中渲染元件，需要在VueRouter的引數中使用children配置： <script src="https://unpkg.com/vue/dis
vue-router巢狀路由定向問題
存在這樣一個路由routes: [ { path: '/home', name: 'home', component: Nav, children: [ { path: 'index'
vue巢狀路由-params傳遞引數（四）
在巢狀路由中，父路由向子路由傳值除了query外，還有params，params傳值有兩種情況，一種是值在url中顯示，另外一種是值不顯示在url中。 1、顯示在url中 index.html <div id="app"> <!-
vue巢狀路由-query傳遞引數（三）
在巢狀路由中我們經常會遇到父路由向子路由裡面傳遞引數，傳遞引數有兩種方法，通過 query 或者 params index.html <div id="app"> <!-- router-view 路由出口, 路由匹配到的元件將渲染在
vue巢狀路由（二）
在實際專案中我們會碰到多層巢狀的元件組合而成，但是我們如何實現巢狀路由呢？因此我們需要在 VueRouter 的引數中使用 children 配置，這樣就可以很好的實現路由巢狀。 index.html，只有一個路由出口 <div id="app"> &
vue-router： 路由傳參
路由傳引數。在很多時候我們需要路由上面傳遞引數，比如新聞列表頁，我們需要傳遞新聞ID，給新聞詳細頁。 1.新聞列表頁模板 <template id="news"> <div> <h2>新聞列表<
vue巢狀路由與404重定向實現方法分析
第一部分： vue巢狀路由 巢狀路由是什麼？ 巢狀路由就是在一個被路由過來的頁面下可以繼續使用路由，巢狀也就是路由中的路由的意思。 比如在vue中，我們如果不使用巢狀路由，那麼只有一個<router-view>，但是如果使用，那麼在一個元件中就還有<router-view>，這也就構
VUE學習筆記(三)-子路由、多路由、巢狀路由、動態路由都是什麼鬼？
最近學習到VUE路由這塊，發現這塊知識點有點多，好容易混亂，我的學習習慣就是先要建立框架，然後再去挨個學習搞懂，所以先來把概念搞搞清楚再說。 首先，我們要知道VUE路由建立的是單頁面路由。 子路由其實和單路由意思是一樣的，單路由應該很好理解，因為我們都知道路由是可以一層一層巢狀的，你可以
vue——46-webpack打包vue-路由 和 巢狀路由
一、路由 main.js 中 1.引入 vue-router 包 安裝命名：cnpm i vue-router -s import Vue from 'vue'; import app from