router路由簡介與使用

本教程為入門教程，如有錯誤，請各位前端大佬指出。

1.什麼是路由

Vue Router 是

Vue.js

官方的路由管理器。它和 Vue.js 的核心深度內建，讓建構單頁面應用變得易如反掌。路由實際上就是可以了解為指向，就是我在頁面上點選一個按鈕需要跳轉到對應的頁面，這就是路由跳轉；

首先我們來學習三個單詞（route，routes，router）：

route：首先它是個單數，譯為路由，即我們可以了解為單個路由或者某一個路由；

routes：它是個複數，表示多個的集合才能為複數；即我們可以了解為多個路由的集合，JS中表示多種不同狀态的集合的形式隻有數組和對象兩種，事實上官方定義routes是一個數組；是以我們記住了，routes表示多個數組的集合；

router：譯為路由器，上面都是路由，這個是路由器，我們可以了解為一個容器包含上述兩個或者說它是一個管理者，負責管理上述兩個；舉個常見的場景的例子：當使用者在頁面上點選按鈕的時候，這個時候router就會去routes中去查找route，就是說路由器會去路由集合中找對應的路由；

較長的描述請參考官方文檔

router.vuejs.org/zh/guide/es…

2.安裝和引用

1. npm install --save vue-router
2. 複制代碼

在安裝腳手架之後就生成了router/index.js。

這裡需要修改router/index.js。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HelloWorld2 from '@/components/HelloWorld2'
 
Vue.use(Router)
 
export default new Router({
    routes: [{
        //路徑
        path: '/hello',
        //引入名稱
        name: 'HelloWorld',
        component: HelloWorld
    }, {
        //路徑
        path: '/hello2',
        //引入名稱
        name: 'HelloWorld2',
        component: HelloWorld2
    }]
})
複制代碼

app.vue 然後在app.vue的，router标簽中就會顯示HelloWorld.vue。

<template>
  <div id="app">
  QWER
   <router-view></router-view>
  </div>
</template>
 
<script>
 
export default {
  name: 'App',
  data () {
  return {
 }
}
}
</script>
 
<style>
</style>
複制代碼

然後分别通路

http://localhost:8080/#/

http://localhost:8080/#/hello http://localhost:8080/#/hello2就可以跳轉不同的頁面了

3.項目中的簡單使用

現在我們做一個點選不同按鈕跳轉不同頁面的實驗，app.vue是主入口,testlink為導航,根據testlink的導航，跳轉到不同頁面，router-view是根據導航顯示不同的view。

app.vue

<template>
  <div id="app">
   QWER
   <TestLink />
   <router-view></router-view>
  </div>
</template>
 
<script>
import TestLink from "./components/TestLink.vue"
 
export default {
  name: 'App',
  data () {
  return {
 }
},
components:{
  TestLink,
}
}
</script>
 
<style>
</style>
複制代碼

testlink.vue（/hello是路由中配置的随便寫兩個頁面配置路由）

<template>
<div>
   <ul>
    <li>
      <router-link tag = "p" to ="/hello">HelloWorld1</router-link>
    </li>
    <li>
      <router-link to ="/hello2">HelloWorld2</router-link>
    </li>
   </ul>
</div>
</template>
 
<script>
export default {
name: 'TestLink',
data () {
  return {
}
}
}
</script>
 
<style>
</style>
複制代碼

重定向

重定向可以配置從

/a

到重定向

/b

。這裡當通路"/"時，重定向到anim的路由。/ 完成這個功能需要修改router/index.js檔案。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HelloWorld2 from '@/components/HelloWorld2'
import anim from '@/components/Anim'
 
Vue.use(Router)
 
export default new Router({
    routes: [
    
        //配置重定向--/的時候 跳到 anim路徑
        {
            path: '/',
            redirect: "anim"
        },
        {
            //路徑
            path: '/hello',
            //引入名稱
            name: 'HelloWorld',
            component: HelloWorld
        }, {
            //路徑
            path: '/hello2',
            //引入名稱
            name: 'HelloWorld2',
            component: HelloWorld2
        },
        {
            //路徑
            path: '/anim',
            //引入名稱
            name: 'anim',
            component: anim
        }
    ]
})
複制代碼

4.嵌套路由

一級路由下還有超連結，能夠跳不同的頁面，在以上代碼的情況在，在進入HelloWorld頁面後，還有兩個超連結能分别跳到TestNesting1和TestNesting2。以下代碼實作嵌套路由的場景。

//TestNesting1兩個随便的類 差別不同就可以了
<template>
<div>
   TestNesting1
</div>
</template>
 
<script>
 
export default {
name: 'TestNesting1',
data () {
  return {
}
}
}
</script>
複制代碼

如上文一樣在HelloWorld中建立超連結其中配置的是要跳入的路徑加上本身路徑。

<template>
<div>
      HelloWorld
      <ul>
       <li><router-link to = "/hello/TestNesting1">11111</router-link></li>
       <li><router-link to = "/hello/TestNesting2">22222</router-link></li>
      </ul>
      <router-view> </router-view>
</div>
</template>
 
<script>
 
export default {
name: 'HelloWorld',
data () {
  return {
    }
},
methods:{
 
}
}
複制代碼

配置路由檔案

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HelloWorld2 from '@/components/HelloWorld2'
import anim from '@/components/Anim'
import TestNesting1 from '@/components/TestNesting1'
import TestNesting2 from '@/components/TestNesting2'
 
Vue.use(Router)
 
export default new Router({
    routes: [{
            path: '/',
            redirect: "anim"
        },
        {
            //路徑
            path: '/hello',
            //引入名稱 傳入參數一定要是用
            name: 'HelloWorld',
            component: HelloWorld,
            //TestNesting1的重定向
            //意味着在/hello時跳入/hello/TestNesting1 預設顯示/hello/TestNesting1 首頁功能
            redirect: "/hello/TestNesting1",
            //嵌套路由
            children: [
                // UserHome 會被渲染在 User 的 <router-view> 中
                {
                    //不要寫/
                    path: 'TestNesting1',
                    component: TestNesting1
                },
                {
                    path: 'TestNesting2',
                    component: TestNesting2
                }
            ]
        }, {
            //路徑
            path: '/hello2',
            //引入名稱
            name: 'HelloWorld2',
            component: HelloWorld2
        },
        {
            //路徑
            path: '/anim',
            //引入名稱
            name: 'anim',
            component: anim
        }
    ]
})
複制代碼

5.路由的參數傳遞

在跳轉路由時，也可以傳遞參數。

首先在index.js配置參數 --需要在path後加入/:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HelloWorld2 from '@/components/HelloWorld2'
import anim from '@/components/Anim'
import TestNesting1 from '@/components/TestNesting1'
import TestNesting2 from '@/components/TestNesting2'
 
Vue.use(Router)
 
export default new Router({
    routes: [{
            path: '/',
            redirect: "anim"
        },
        {
            //路徑
            path: '/hello',
            //引入名稱 傳入參數一定要是用
            name: 'HelloWorld',
            component: HelloWorld,
            //TestNesting1的重定向
            //意味着在/hello時跳入/hello/TestNesting1 預設顯示/hello/TestNesting1 首頁功能
            redirect: "/hello/TestNesting1",
            //嵌套路由
            children: [
                // UserHome 會被渲染在 User 的 <router-view> 中
                {
                    //不要寫/
                    path: 'TestNesting1',
                    component: TestNesting1
                },
                {
                    path: 'TestNesting2',
                    component: TestNesting2
                }
            ]
        }, {
            //路徑
            path: '/hello2/:id/:money',
            //引入名稱
            name: 'HelloWorld2',
            component: HelloWorld2
        },
        {
            //路徑
            path: '/anim',
            //引入名稱
            name: 'anim',
            component: anim
        }
    ]
})
複制代碼

在

:to ="{name:'HelloWorld2',params:{id:'111',money:'3123123123'}}"

中直接加入想要傳遞的參數即可。

<template>
<div>
   <ul>
    <li>
      <router-link to ="/anim">首頁</router-link>
     </li>
    <li>
      <router-link :to ="test_router">HelloWorld1</router-link>
    </li>
    <li>
      <router-link :to ="{name:'HelloWorld2',params:{id:'111',money:'3123123123'}}">HelloWorld2</router-link>
    </li>
   </ul>
</div>
</template>
 
<script>
export default {
name: 'TestLink',
data () {
  return {
        test_router:"/hello"
}
}
}
</script>
 
<style>
</style>
複制代碼

最後在被跳轉頁接收。

<template>
<div>
   HelloWorld2
   <p>傳遞的參數為{{$route.params.id}}+{{$route.params.money}}</p>
</div>
</template>
 
<script>
 
export default {
name: 'HelloWorld2',
data () {
  return {
}
}
}
</script>
複制代碼

6.路由高亮

在router/index.js中加入linkActiveClass: "active"屬性，他為所有的路由加入active的class，即可實作高亮。

export default new Router({
    //解決曆史問題
    mode: 'history',
    //路由高亮
    linkActiveClass: "active",
    routes: [{
            path: '/',
            redirect: "anim"
        },
        {
            //路徑
            path: '/hello',
            //引入名稱 傳入參數一定要是用
            name: 'HelloWorld',
            component: HelloWorld,
            //TestNesting1的重定向
            //意味着在/hello時跳入/hello/TestNesting1 預設顯示/hello/TestNesting1 首頁功能
            redirect: "/hello/TestNesting1",
            //嵌套路由
            children: [
                // UserHome 會被渲染在 User 的 <router-view> 中
                {
                    //不要寫/
                    path: 'TestNesting1',
                    component: TestNesting1
                },
                {
                    path: 'TestNesting2',
                    component: TestNesting2
                }
            ]
        }, {
            //路徑
            path: '/hello2/:id/:money',
            //引入名稱
            name: 'HelloWorld2',
            component: HelloWorld2
        },
        {
            //路徑
            path: '/anim',
            //引入名稱
            name: 'anim',
            component: anim
        }
    ]
})
複制代碼

然後在路由頁面的css中加入以下代碼，且指定顔色為紅色。

1. <style>
2. .active{
3. color:red;
4. }
5. </style>

router路由簡介與使用

1.什麼是路由

2.安裝和引用

3.項目中的簡單使用

重定向

4.嵌套路由

5.路由的參數傳遞

6.路由高亮

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條