vue學習筆記（七）---- vue中的路由

千夏Chinatsu發表於2020-10-27

Vue筆記路由

一、什麼是路由

對於普通的網站來說，所有的超連結都是URL地址，所有的URL地址都對應伺服器上對應的資源
對應單頁面的應用程式來說，主要通過URL中的hash（#號）來實現不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關的內容，所以，單頁面的應用程式的頁面跳轉主要用hash來處理
在單頁面應用程式中，這種通過hash改變來切換頁面的方式，稱作前端路由（區別於後端路由）；

二、vue-router的安裝

官方文件：https://router.vuejs.org/zh/

安裝

在這裡插入圖片描述

二、vue-router的基本使用

匯入vue和 vue-router 元件類庫

<script src="../lib/vue-2.6.10.js"></script>
<script src="../lib/vue-router-v3.0.1.js"></script>

使用 router-link 元件來導航

<!-- 表示路由連結， router-link 預設渲染為 a 標籤 -->
<!--    tag=""可以更換預設標籤-->
<router-link to="/login" tag="sapn">登入</router-link>
<router-link to="/reg">註冊</router-link>

使用 router-view 元件來顯示匹配到的元件

<!-- 路由的坑 ，將來用來把匹配到的元件，呈現到這個坑中  -->
<!-- router-view 預設不會被渲染為元素 -->
<router-view></router-view>

建立使用Vue.extend建立元件

方式一：

    var login = Vue.extend({
      template: '<h3>登入元件</h3>'
    });
    var register = Vue.extend({
      template: '<h3>註冊元件</h3>'
    });

方式二：

    var login = {
      template: '<h3>登入元件</h3>'
    }
    var reg = {
      template: '<h3>註冊元件</h3>'
    }

建立一個路由 router 例項，通過 routers 屬性來定義路由匹配規則

var router = new VueRouter({
      routes: [ // 路由規則的陣列
        { path: '/login', component: login }, 
       // 路由規則 其中， path 表示要匹配的hash值，component 表示對應的hash要展示的 元件物件
        { path: '/reg', component: reg }
     //  匹配到的路由元件，如果想要展示給使用者，需要在頁面上放 <router-view></router-view>
      ]
 })

使用 router 屬性來使用路由規則

 var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
     // router : router
      //簡寫成：
      router    
});

來吧展示：

在這裡插入圖片描述

三、路由匹配規則

點選路由標籤，就會修改hash值，當hash值被修改了之後，會被路由規則監聽到，如果能找到，就會根據最新的hash值找到路由元件，然後把元件渲染到頁面上

所以總的來說就是先觸發router-link，然後修改hash值，hash值改變了，就會被路由物件監聽到，監聽到之後匹配路由規則，然後找到對應的元件然後放到頁面上展示

四、設定路由切換高亮效果

方式一：更改.router-link-active的樣式

預設被選中的連結就會有這麼一個類.router-link-active，這是官方提供的

<style>
        .router-link-active {
            color: red;
            font-weight: bold;
            font-style: italic;
            font-size: 20px;
            text-decoration: underline;
        }
    </style>

<body>
<div id="app">
    <router-link to="/login" tag="span">登入</router-link>
    <router-link to="/reg" tag="span">註冊</router-link>
    <router-view></router-view>
</div>
<script>
    var login = {
        template: '<h3>登入元件</h3>'
    }
    var reg = {
        template: '<h3>註冊元件</h3>'
    }
    var router = new VueRouter({
          routes: [ 
        // { path: '/', component: login },
        { path: '/', redirect: '/login' },   
        { path: '/login', component: login },
        { path: '/reg', component: reg }
      ]
    })
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router
    });
</script>
</body>

來吧展示：

在這裡插入圖片描述

方式二：自定義樣式取代 .router-link-active 的樣式

.my-active {
            color: orange;
            font-size: 30px;
 }

var router = new VueRouter({
      routes: [ 
        // { path: '/', component: login },
        { path: '/', redirect: '/login' },   
        { path: '/login', component: login },
        { path: '/reg', component: reg }
      ],
      linkActiveClass: 'my-active' 
      // 配置預設被 選中路由的高亮類名的 ， 預設類名為 router-link-active
    })

來吧展示：

在這裡插入圖片描述

五、為路由的切換新增動畫效果

<style>
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(100px);
    }
    .v-enter-active,
    .v-leave-active {
      transition: all 0.3s ease;
      position: absolute;
    }
</style>

<transition>
      <router-view></router-view>
 </transition>

來吧展示：

在這裡插入圖片描述

六、路由傳參

1.以 `？` 問號的方式傳參

<router-link to="/login?id=10">登入</router-link>
<router-link to="/reg">註冊</router-link>

在路由中使用？傳參，不需要修改路由規則，不會影響路由連結的跳轉

在這裡插入圖片描述
將？後面傳遞的 id值展示在頁面中

var login = {//元件也有自己的生命週期函式，這些函式，和 vm 例項的 生命週期函式一致
    template: '<h3>登入元件</h3>',
  //元件被建立完成後會呼叫created()函式
    created(){//當 login 元件 中 data 和 methods 初始化完畢後，呼叫 created
    console.log(this)
     }
}

在這裡插入圖片描述

var login = {
        template: '<h3>登入元件 ---- {{$route.query.id}} </h3>',
        created(){
            console.log(this)
            console.log(this.$route.query.id)
      }
}

在這裡插入圖片描述

2.以 `/` 斜槓的方式傳參

<router-link to="/login/18/hui">登入</router-link>
<router-link to="/reg">註冊</router-link>

以/ 斜槓方式傳參要修改路由規則，表示傳遞的引數代表什麼含義，如下：

var router = new VueRouter({
        routes: [ 
            { path: '/', redirect: '/login' },   
            { path: '/login/:age/:name', component: login },
            { path: '/reg', component: reg }
        ],
        linkActiveClass: 'my-active'
    })

在這裡插入圖片描述

var login = {
   template: '<h3>登入元件 ---- {{$route.params.age}} ----- {{$route.params.name}}</h3>',
   created(){
   console.log(this)
  }
}

在這裡插入圖片描述

七、路由中使用 `props` 傳參

 var login = {
        props: ['age', 'name'],
        template: '<h3>登入元件 ---- {{age}} ---- {{name}} </h3>',
        //元件被建立完成後會呼叫created()函式
    }

var router = new VueRouter({
        routes: [ 
            { path: '/', redirect: '/login' },    
            { path: '/login/:age/:name', component: login,props: true },
            //將來匹配到的引數,可以直接通過props來接受
            { path: '/reg', component: reg }
        ],
        linkActiveClass: 'my-active'
})

在這裡插入圖片描述

八、使用 `children` 屬性實現路由巢狀

<div id="app">
    <router-link to="/index">這是首頁</router-link>
    <router-link to="/news">這是新聞頁</router-link>
    <router-view></router-view>
</div>
<script>
    var index = {
        template:`<div class="index">
      <h3>這是首頁</h3>
     <router-link to="/index/login">登入</router-link>
      <router-view></router-view>
</div>`
        //如果只是這樣的話,點選登入救只能顯示登入的元件,不能顯示首頁的元件
        // 想要實現點選登入能顯示首頁又能顯示登入頁，需要使用children來實現路由的巢狀
    }
    var news = {
        template:'<div class="news"><h3>這是新聞頁</h3></div>'
    }
    var login = {
        template:'<h3>登入</h3>'
    }
    var router = new VueRouter({
        routes:[
            {path:'/index',component:index,
                children:[{path:'login',component:login}]},
            // {path:'/index/login',component:login},
            {path:'/news',component:news}
        ]
    })
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        router

    })
</script>

來吧展示：

在這裡插入圖片描述

九、命名檢視的使用

   <style>
        html,
        body,
        h1 {
            margin: 0;
            padding: 0;
            font-size: 20px;
        }

        .header {
            height: 120px;
            background-color: darkcyan;
        }

        .container {
            height: 400px;
            display: flex;
        }

        .sidebar {
            background-color: orange;
            flex: 2;
        }

        .content {
            background-color: pink;
            flex: 10;
        }

        .footer {
            background-color: black;
            color: white;
            height: 100px;
        }
    </style>

<body>
<div id="app">
    <!-- 路由的容器 -->
    <router-view name="top"></router-view>
    <div class="container">
        <router-view name="left"></router-view>
        <router-view name="right"></router-view>
    </div>
    <router-view name="bottom"></router-view>
</div>
<script>
    const header = {
        template: `<h1 class="header">頭部區域</h1>`
    }
    const sidebar = {
        template: `<h1 class="sidebar">左側側邊欄</h1>`
    }
    const content = {
        template: `<h1 class="content">主體內容區域</h1>`
    }
    const footer = {
        template: `<h1 class="footer">尾部</h1>`
    }
    const router = new VueRouter({
        routes: [
            // { path: '/', component: header }
            {
                path: '/', components: {
                    //     元件名稱 :  元件物件
                    'top': header,
                    'left': sidebar,
                    'right': content,
                    'bottom': footer
                }
            }
        ]
    })

    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router
    });
</script>
</body>

來吧展示：

在這裡插入圖片描述

Vue學習筆記（十一）：路由管理
2023-10-16
Vue筆記路由
Vue學習筆記之路由篇
2021-09-09
Vue筆記路由
vue 3 學習筆記 (七)——vue3 中 computed 新用法
2021-11-25
Vue筆記
vue筆記-6 vue中router路由路由引數的傳遞巢狀路由
2020-10-09
Vue筆記路由巢狀
Vue 學習筆記
2024-06-10
Vue筆記
vue學習筆記
2021-09-09
Vue筆記
vue學習筆記（六） ----- vue元件
2020-10-28
Vue筆記元件
vue學習筆記6
2024-07-05
Vue筆記
vue學習筆記4
2024-07-01
Vue筆記
vue學習筆記-2
2024-06-29
Vue筆記
Vue 3 學習筆記
2024-06-01
Vue筆記
Vue 學習筆記——指令
2020-10-19
Vue筆記
Vue學習筆記 —— axios
2020-10-07
Vue筆記iOS
vue學習筆記二
2018-12-21
Vue筆記
vue學習筆記一
2018-12-20
Vue筆記
vue 學習筆記 - vuex
2019-02-27
Vue筆記
Vue學習筆記1
2018-09-06
Vue筆記
Vue學習筆記3
2018-07-15
Vue筆記
Vue學習筆記5
2018-07-16
Vue筆記
Vue學習筆記2
2018-09-12
Vue筆記
vue2.0學習筆記（八）：vue-router 路由配置（1）–基礎篇
2018-04-23
Vue筆記路由
Vue學習筆記（2）—— Vue的生命週期
2018-10-16
Vue筆記
vue常用操作及學習筆記（路由跳轉及路由傳參篇）
2018-08-24
Vue筆記路由
Vue.js 學習筆記之七：使用現有元件
2021-03-15
Vue.js筆記元件
Vue學習筆記（二）------axios學習
2019-04-20
Vue筆記iOS
Vue3 學習筆記
2024-03-31
Vue筆記
vue.js 學習筆記
2019-08-05
Vue.js筆記
Vue-Router學習筆記
2018-10-23
Vue筆記
Vue學習筆記（一）------腳手架vue cli
2019-04-17
Vue筆記
Vue學習筆記之Webpack的使用
2020-08-02
Vue筆記Web
vue學習筆記（八）---- vue中的例項屬性（wacth和computed的使用）
2020-10-27
Vue筆記
學習筆記-DAY01-VUE
2020-09-23
筆記Vue
Vue_cli——學習筆記1
2020-12-05
Vue筆記
Vue（1）之—— Vuex學習筆記
2019-03-20
Vue筆記
vue原始碼學習筆記1
2019-03-07
Vue原始碼筆記
Vue知乎日報的學習筆記
2019-03-21
Vue筆記
Vue.js 2.x筆記：路由Vue Router（6）
2018-06-13
Vue.js筆記路由
[今日白記]Vue基礎的學習筆記（一）
2019-04-04
Vue筆記

vue學習筆記（七）---- vue中的路由

一、什麼是路由

二、vue-router的安裝

安裝

二、vue-router的基本使用

三、路由匹配規則

四、設定路由切換高亮效果

五、為路由的切換新增動畫效果

六、路由傳參

1.以 ？ 問號的方式傳參

2.以 / 斜槓的方式傳參

七、路由中使用 props 傳參

八、使用 children 屬性實現路由巢狀

九、命名檢視的使用

相關文章

1.以 `？` 問號的方式傳參

2.以 `/` 斜槓的方式傳參

七、路由中使用 `props` 傳參

八、使用 `children` 屬性實現路由巢狀