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>
    <style>
      ul {
        display: flex;
      }
      li {
        list-style-type: none;
        padding: 0 20px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul>
        <li>< 
router-link to="/home">首頁</router-link></li>
        <li><router-link to="/product/one">蔬菜</router-link></li>
        <li><router-link to="/product/tow">水果</router-link></li>
        <li><router-link to="/product/33">肉類</router-link> 
</li>
      </ul>

      <router-view></router-view>
    </div>
    <script>
      let myhome = Vue.component('home', {
        template: '<div>這是首頁</div>'
      })
      let myproduct = Vue.component('product', {
        // 2. 頁面中獲取路由引數通過    $route.params.引數名    獲取
        template: `
              <div>
                <p>商品分類,該分類的編號是{{$route.params.cid}}</p>
              </div>
        `,
        mounted () {
          // 3. js中通過this.$route.params.引數名來獲取路由引數
          console.log(this.$route.params.cid);
        }
      })
      let router = new VueRouter({
        routes: [
          {name: 'index', path: '/home', component: myhome},
          // 1. 路由引數 :引數名  就可以定義了，⭐這個冒號的作用是將後面的變數變成引數
          {name: 'productCate', path: '/product/:cid', component: myproduct}
        ]
      })
      var vm = new Vue({
        el: '#app',
        router,
        data: {

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

監聽路由

<!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>
      .myul {
        display: flex;
      }
      .navitem {
        list-style-type: none;
        padding: 0 20px;
      }
    </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>這是首頁</div>'
      })
      let myproduct = Vue.component('product', {
        template: `
              <div>
                <p>這是商品分類,該分類的編號是{{$route.params.cid}}</p>
                <ul>
                  <li v-for="(item, index) in products" :key="index">{{item}}</li>
                </ul>
              </div>
        `,
        data () {
          return {
            products: []
          }
        },
        // watch: {
        //   '$route' (to, from) {
        //     // 對路由變化作出響應...
        //     // to 表示到哪裡去的路由物件
        //     // console.log(to);
        //     // from 表示從哪個路由物件跳
        //     // console.log(from);
        //     let cid = to.params.cid
        //     console.log(cid);
        //   }
        // },
        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表示立馬執行一次
            immediate: true
          }
        }
        // mounted () {
        //   console.log(this.$route.params.cid);
        // }
      })
      let router = new VueRouter({
        routes: [
          {name: 'index', path: '/home', component: myhome},
          {name: 'productCate', path: '/product/:cid', component: myproduct}
        ]
      })
      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 n

Vue路由模式及監聽

當然詳細情況還是看一下vue的官網咖官網https://router.vuejs.org/zh/ hash模式下（預設） new VueRouter({ mode : ‘hash’, routes : [] }) window.addEventLi

基於vue-cli的vue專案之路由3--watch監聽路由

有時候我們需要監聽路由，做出某種操作。。。程式碼主要在app.vue上 1.hello.vue頁面//獲取一個引數，第五行顯示 <template> <div class="hello"> <!--{{ this.$route.param

vue 在.vue文件裏監聽路由

com watch creat data user nag default port pan 監聽路由 watch $route vue項目中的App.vue 文件 <template> <div id="app"> <

Vue-- 監聽路由變化，數據無法更新？

響應被調用數據驅動後來實例無法誤區 .com 來看　　之前寫的Vue項目，有個問題困擾了好久。新聞板塊有推薦、精華、最新等幾個Tab，設想通過切換Tab，改變路由參數（get/news/:tab）去獲取對應數據，然後渲染到頁面（用的是同一套組件），問題來了：當

vue 監聽路由變化

scrip rip 不同的 bsp ted 監聽 brush 通過 deep 方法一：通過 watch // 監聽,當路由發生變化的時候執行 watch:{ $route(to,from){ console.log(to.path); } }, 或 /

vue利用watch監聽路由變化

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

vue 監聽路由變化，dom載入完成後執行程式碼

watch 監聽路由變化，且dom渲染完成後執行函式專案中在頁面中用到了footer，為了在頁面內容不超過螢幕高度時將footer定位置底，超過螢幕高度時不做定位，正常在內容最底部顯示，運用瞭如下方式問題：若不在dom渲染後執行，獲取的高度是不正確的. watch: {

react-router搭配react-redux無法監聽路由變化的問題

不必要默認 cti 傳遞通過 nbsp fun urn style 在react中，要將react組件連接到redux中，通常會這樣包裝組件 class Home extends Component { } function select(state)

Angular 監聽路由變化

oca sta 實現 content 地址 root control $watch class var app = angular.module(‘Mywind‘,[‘ui.router‘]) //Angular 監聽路由變化 function run($ionicPla

Angular4_監聽路由切換

Title Service在angular中，我們可以通過Title來設定頁面標題。我們從platform-browser匯入Title, 同時也匯入Router。import { Title } from '@angular/platform-browser'; impor

Angular4 監聽路由URL的變化

Angular 4檢測路由變化，可以使用router.events來監聽：支援的事件型別：NavigationStart：導航開始NavigationEnd：導航結束NavigationCancel：取消導航NavigationError：導航出錯RoutesRecoginz

mint ui的tabBar監聽路由變化實現tabBar切換

高亮顯示 get template this fault 購物 storage nta temp 說明最近學習vue，使用了mint ui的tabBar，感覺好難受，結合 tab-container使用更難受，因為它不是根據路由來切換頁面的。mui與它基本相反，因此它能

全域性監聽路由堆疊變化

![](https://img2020.cnblogs.com/other/467322/202009/467322-20200917071602199-1987970170.png) > **老孟導讀**：很多時候我們需要監聽路由堆疊的變化，這樣可以自定義路由堆疊、方便分析異常日誌等。監聽路

Java Swing界面編程(25)---事件處理：鼠標事件及監聽處理

鼠標右鍵 util else if this setbounds user swing 事件處理 dem 假設想對一個鼠標的操作進行監聽，假設鼠標按下、松開等。則能夠使用MouseListener接口。 package com.beyole.util; import

vue.js 組件監聽

class emit 點擊事件 methods rtc 點擊 str vue.js targe 一、在通過點擊事件觸發的子組件中： addCart(event) { if (!event._constructed) { return; } if (!t

spring 自定義事件發布及監聽（簡單實例）

講解 new 繼承概念接口處理啟動 lca 事件對象前言： Spring的AppilcaitionContext能夠發布事件和註冊相對應的事件監聽器，因此，它有一套完整的事件發布和監聽機制。流程分析：在一個完整的事件體系中，除了事件和監聽器以外，還應該有3個概

vue watch怎樣同時監聽兩個值的變化並執行方法？

用computed定義一個address物件吧，然後再去watch addres data() { return { city: '', country: '' } }, computed: { address() { const { city, countr

Vue 新增滑動條監聽

在鉤子中新增監聽 mounted () { const _this = this document.documentElement.addEventListener('scroll', _this.handleScroll, true) }, &nbs

系統重灌後，重新配置oracle及監聽

1.cmd命令下執行sqlplus無效，是因為環境變數未配置，進行環境變數配置： 1）變數名path中增加變數值：%ORACLE_HOME%\BIN； 2）新增變數名ORACLE_HOME，變數值：E:\oracle\app\product

Vue路由引數及監聽路由

路由引數

監聽路由

相關推薦