C語言中的陣列型別

阿新 • • 發佈：2022-03-24

　　前端路由的概念與原理

　1.1什麼是路由：對應關係,通俗易懂的話來講就是Hash地址與元件的之間的對應關係

　 1.2前端路由的工作原理

使用者點選了頁面上的路由連結
導致了URL位址列中的Hash值發生了變化
前端路由監聽到了Hash值的變化
前端路由把當前的Hash地址對應的元件渲染到瀏覽器中

　　vue-router 的基本使用用法

　1.1vue-router是vue.js官方給出的路由解決方案，只能結合vue使用能夠管理SPA專案中元件的切換

1.2vue-router安裝和配置步驟

　 1. 安裝vue-router包命令如下：

npm i [email protected] -S

　 2.建立路由模組

//src/router/index.js當前專案的路由模組

//1匯入vue和vueRouter的包
import Vue from "vue"
import VueRouter from "vue-router"

//2.呼叫vue.use()函式，把VueRouter安裝為Vue的外掛
Vue.use(VueRouter)

//3.建立路由的例項物件
const router=new VueRouter()

//4.向外共享路由的例項物件
export default router

　　3.匯入並掛載路由模組

// 匯入路由模組，目的：拿到路由的例項物件
// 在進行模組化匯入的時候，如果給定的是資料夾，則預設匯入這個資料夾下，名字叫做 index.js 的檔案 

import router from '@/router
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  // 在 Vue 專案中，要想把路由用起來，必須把路由例項物件，通過下面的方式進行掛載
  // router: 路由的例項物件
  router
}).$mount('#app')

　　4.宣告路由連結和佔位符

 <router-link to="/movie/1">洛基</router-link>
    <router-link to="/movie/2?name=zs&age=20">雷神</router-link>
    <router-link to="/movie/3">復聯</router-link>
    <router-link to="/about">關於</router-link>

    <hr />

    <!-- 只要在專案中安裝和配置了 vue-router，就可以使用 router-view 這個元件了 -->
    <!-- 它的作用很單純：佔位符 -->
    <router-view></router-view>

　　1.3在 src/router/index.js 路由模組中，通過 routes 陣列宣告路由的匹配規則。示例程式碼如下

//1匯入vue和vueRouter的包
import Vue from "vue"
import VueRouter from "vue-router"

import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

//2.呼叫vue.use()函式，把VueRouter安裝為Vue的外掛
Vue.use(VueRouter)

//3.建立路由的例項物件
const router = new VueRouter({
  //routes是一個數組，定義hash地址與元件的對應關係
  routes: [
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    { path: '/about', component: About }
  ]
})

//4.向外共享路由的例項物件
export default router

　　 vue-router 的常見用法

　 1.1路由重定向：使用者再放訪問A地址的時候，強制使用者跳轉到C地址，從而展示特定的元件頁面通過路由規則的redirect屬性指定一個新的路由地址，設定路由的重定向

//3.建立路由的例項物件
const router = new VueRouter({
  //routes是一個數組，定義hash地址與元件的對應關係
  routes: [
    //重定向路由規則
    { path: '/', redirect: '/home' },
    //路由規則
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    { path: '/about', component: About }
  ]
})

　　 1.3巢狀路由:通過路由實現元件的巢狀展示　

　　1在 About.vue 元件中，宣告 tab1 和 tab2 的子路由連結以及子路由佔位符。

<!-- 子級路由連結 -->

    <router-link to="/about/tab1">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>

    <hr />
    <!-- 子級佔位符 -->
    <router-view></router-view>

　　2通過 children 屬性宣告子路由規則

import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'

//2.呼叫vue.use()函式，把VueRouter安裝為Vue的外掛
Vue.use(VueRouter)

//3.建立路由的例項物件
const router = new VueRouter({
  //routes是一個數組，定義hash地址與元件的對應關係
  routes: [
    //重定向路由規則
    { path: '/', redirect: '/home' },
    //路由規則
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    {
      path: '/about', component: About, redirect: '/about/tab1', children: [
        // 子路由規則,只要在子路由節點下path中不必加/
        { path: 'tab1', component: Tab1 },
        { path: 'tab2', component: Tab2 }
      ]
    }

  ]
})

　　1.4動態路由匹配：是把Hash地址中可變的部分定義為引數項，從而提高了路由規則的複用性。在vue-router中使用英文（:）來定義路由的引數項

 routes: [
    //重定向路由規則
    { path: '/', redirect: '/home' },
    //路由規則
    { path: '/home', component: Home },
     //在vue-router中使用英文（:）來定義路由的引數項
    { path: '/movie/:id', component: Movie }
    }

  ]

　　1.4.1在動態路由渲染出來的元件中，可以使用this.$route.parans物件訪問到動態匹配的引數值

<template>
  <div class="movie-container">

　　 //this.$route.params是路由的引數物件

<h3>Movie 元件---{{this.$route.params.id}} </h3> <button @click="showThis">列印this</button> </div> </template>

　1.4.2使用 props 接收路由引數，為了簡化路由引數的獲取形式，vue-router 允許在路由規則中開啟 props 傳參。示例程式碼如下

// 可以為路由規則開啟props傳參，從而可以拿到動態引數的值
    
{ path: '/movie/:id', component: Movie, props: true },
<template>
  <div class="movie-container">
    <h3>Movie 元件---{{id}} </h3>
    <button @click="showThis">列印this</button>

  </div>
</template>

<script>
export default {
  name: 'Movie',

  //接受props資料
  props: ['id']
}
</script>

　　 1.5宣告式導航和程式設計式導航
　　1.5.1宣告式導航：在瀏覽器中點選連結實現導航的方式，叫做宣告式導航，例如網頁中點選<a>標籤連結、vue中點選<router-link>都屬於宣告式導航

　　1.5.2程式設計式導航：在瀏覽器中呼叫API方法實現導航的方式叫做程式設計式導航，例如網頁中呼叫localtion.href跳轉到新頁面的方式屬於程式設計式導航

　　1.5.3vue-router 中的程式設計式導航 API

　　1.5.3.1this.$router.push('hash地址')：跳轉到指定的hash地址，並增加一條記錄

<template>
  <div class="home-container">
    <h3>Home 元件</h3>

    <hr />
    <button @click="gotopush"> 通過push跳轉到“洛基”頁面</button>

  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    gotopush() {
      //通過程式設計式API，導航跳轉到的指定頁面
      this.$router.push('/movie/1')
    }
  }
}
</script>

　　1.5.3.2this.$router.replace('hash 地址')：跳轉到指定的 hash 地址，並替換掉當前的歷史記錄

<template>
  <div class="home-container">
    <h3>Home 元件</h3>

    <hr />
    <button @click="gotoreplace">通過replace跳轉到“洛基”頁面</button>

  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    gotoreplace() {
      this.$router.replace('/movie/1')
    }
  }
}
</script>

　　1.5.3.3this.$router.go(數值 n):呼叫$router.go（）方法，可以在瀏覽器歷史中前進和後退

<template>
  <div class="movie-container">
    <h3>Movie 元件---{{this.$route.params.id}}-----{{id}} </h3>
    <button @click="showThis">列印this</button>
    <button @click="goback">後退</button>
    <!-- $router.go 的簡化用法 -->
    <!-- $router.back()在歷史記錄中，後退到上一個頁面 -->
    <button @click="$router.back()">back後退</button>
    <!-- $router.forward()在歷史記錄中，前進到下一個頁面 -->
    <button @click="$router.forward()">forward前進</button>

  </div>
</template>

<script>
export default {
  name: 'Movie',
  methods: {
    showThis() {
      console.log()
    },
    //go(-1)表示後退一層
    //如果後退次數上限則原地不動
    goback() {
      this.$router.go(-1)
    }
  },
}
</script>