Vue路由巢狀

阿新 • • 發佈：2018-12-26

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
    <!-- 1. 先引入vue-router檔案 -->
    < 
script src="./vue-router.js"></script>
    <script src="./axios.js"></script>
    <style>
      ul.myul {
        display: flex;
      }
      li.navitem {
        list-style-type: none;
        padding: 0 20px;
      }
      .product {
        border: 1px solid blueviolet;
      } 

      .index {
        border: 1px solid pink;
      }
      .cookbook {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul class="myul">
        <li class="navitem"><router-link to="/home">首頁</router-link> 
</li>
        <li class="navitem"><router-link to="/product/11">蔬菜</router-link></li>
        <li class="navitem"><router-link to="/product/22">水果</router-link></li>
        <li class="navitem"><router-link to="/product/33">肉類</router-link></li>
      </ul>

      <router-view></router-view>
    </div>
    <script>
      let myhome = Vue.component('home', {
        template: '<div class="index">這是首頁</div>'
      })
      let myproduct = Vue.component('product', {
        template: `
              <div class="product">
                <p>這是商品分類,該分類的編號是{{$route.params.cid}}</p>
                <ul>
                  <li v-for="(item, index) in products" :key="index">{{item}}</li>
                </ul>
                <button @click='viewbook'>檢視菜譜</button>
                <router-view></router-view>
              </div>
        `,
        data () {
          return {
            products: []
          }
        },
        methods: {
          viewbook() {
            // 跳轉到菜譜對應的路由規則,注意這裡是$router⭐,這就是程式設計式導航，就是js實現的路由跳轉
            this.$router.push({name: 'book'})
          }
        },
        watch: {
          '$route': {
            handler(to, from) {
              let cid = to.params.cid
              console.log(cid);
              axios.get(`http://192.168.75.84:3000/list/${cid}`)
                .then(res => {
                  this.products = res.data.products
                })
            },
            immediate: true
          }
        }

      })

      // 菜譜元件
      let cookbook = Vue.component('book', {
        template: '<div class="cookbook">青椒炒肉/土豆燉牛肉/清水白菜。。。。。</div>'
      })
      let router = new VueRouter({
        routes: [
          {name: 'index', path: '/home', component: myhome},
          // 1. 定義子路由通過children屬性設定，children屬性就是一個一個的物件，物件中也是name/path/component
          {name: 'productCate', path: '/product/:cid', component: myproduct,
            children: [
              // 在子路由中，path屬性不能加 /
              {name: 'book', path: 'cook', component: cookbook}
            ]
          },
          // path: '*' 表示如果匹配不到上面的路由規則，那麼剩下的所有路由規則都走下面這條規則（預設首頁），redirect表示重定向
          {name: 'default', path: '*', redirect: {name: 'index'}}
        ]
      })
      var vm = new Vue({
        el: '#app',
        router,
        data: {

        }
      })
    </script>
  </body>
</html>

加個小總結

在這裡插入圖片描述

Vue路由巢狀

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

vue路由巢狀，配置children巢狀路由

巢狀路由就是路由裡面巢狀他的子路由，可以有自己的路由導航和路由容器（router-link、router-view），通過配置children可實現多層巢狀 //mine元件 <template

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的路由巢狀

1.需要在 Router 的引數中使用 children 配置： PS：登入成功後跳轉到action元件，action元件包括多個子元件，渲染左邊的導航欄（fixed）和預設渲染index的內容。相當於

vue2.0子路由配置和跳轉 vue-router: 巢狀路由

路由跳轉 <li class="nav_li" v-link="{ path: '/home/reg'}"></li> <router-link to="/home/reg">註冊</router-link> this.

VUE多層路由巢狀

例如:在做系統時，主頁面有兩個功能【home】and【news】,在【home】下又分為登入和註冊。首先需要將各種模板進行抽離。定義模板 <template id="home">

vue-router巢狀+檢視路由

一、巢狀路由（配置好父路由component後，在父路由下面新增children屬性來配置這個父路由的子路由）需要注意的是：父元件中的<router-view></router-view>是子元件的佔位符是必不可少的巢狀路由的現象：點選了路由跳

Vue-router巢狀路由的使用

路由使用的時候需要設定路由的路徑： ew Router({ // mode: 'abstract', routes: [ { path: '/top', component: Top }, { path: '/new', component: New

vue-router路由巢狀

巢狀路由顧名思義就是路由的多層巢狀。結合vue-router仿天貓底部導航欄，給元件Me新增巢狀路由，也叫子路由。總共新增兩個子路由，分別命名Collection.vue（我的收藏）和Trace.vue（我的足跡） 1、重構router/index.js的路由配置，

vue-router巢狀路由定向問題

存在這樣一個路由routes: [ { path: '/home', name: 'home', component: Nav, children: [ { path: 'index'

React 學習筆記（七）（路由及路由巢狀 react-router 4.x 基本配置及使用）

react-router 路由根據使用者訪問的地址動態的載入不同的元件 1.安裝 npm install react-router-dom --save 2.引入 import { BrowserRouter as Router, Route, Link } fr

vue中巢狀頁面 iframe 標籤

vue中巢狀iframe,將要巢狀的檔案放在static下面: <iframe src="../../../static/bear.html" width="300" height="300" frameborder="0" scrolling="auto"></ifr

vue表格巢狀內容展開收起

<table class="tab-left table tab-zn"> <thead> <tr&g

AngularJS路由巢狀，通過ui-route實現深層路由

1.前面我們通過了簡單的ng-route實現了簡單層次的路由，對於深層次的路由，我們可以通過ui-route來實現。（1）ng-route的侷限性：一個頁面無法巢狀多個檢視，也就是說一個頁面只能有包含一個頁面一個控制器的切換。（2）ui-route的改進

vue元件巢狀迴圈報錯 provide name option

問題原因：巢狀的元件沒有例項化完成解決方法：在專案初始化也就是在main.js中引入該元件 main.js import Vue from 'vue'; import Element from url; Vue.component('elementName', Element);

vue中巢狀頁面（iframe）

vue中巢狀iframe,將要巢狀的檔案放在static下面。src可以使用相對路徑，也可使用伺服器根路徑http:localhost:8088/… <iframe src="../../static/plusPro.html" width="1200"

vue-router巢狀命名檢視

/settings/emails /settings/profile +-----------------------------------+ +---------

angular4.x 路由巢狀

以下為非root-route中的程式碼：部分程式碼地址：https://github.com/oceankai/angular4-demo/tree/master/tab-demo1、需要巢狀的二級路由const routes: Routes = [ { path: '',

我的一個React路由巢狀（多級路由），路由傳參之旅

在上一篇react路由之旅中，我們簡單地配置了react，進行了react路由及相關知識的學習，引入以及實現一個區域性跳轉的功能，接下來就是深入學習路由的巢狀以及傳參，這是工作中主要用要的。我的react已經配置了redux（見我的redux之旅），所以這是在引入的外掛裡做的演示。從App元件跳轉到New

Vue路由巢狀

加個小總結

相關推薦