快速理解 vue-router （vue路由）的使用方法（一）

阿新 • • 發佈：2019-03-06

use utf-8 http tcs 一個 out ati 添加屬性 boot

特意整理了一下 vue-router 的使用方法，可以整篇復制直接看效果，裏面寫了很多註釋，幫助你看懂路由的使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" 
>
    <title>Document</title>
</head>
<body>
    <div id="div1">
        <div>
            <!-- router-link的作用就是代替a標簽實現跳轉，好處是沒有刷新 -->
            <router-link to="/home">首頁</router-link>
            <router-link to="/about">關於我們頁</router-link 
>
            <router-link to="/user/張三">張三</router-link>
            <router-link to="/user/李四">李四</router-link>
            <button @click="pushUser">手動添加訪問用戶</button>
        </div>

        <div>
            <!-- 跳轉之後顯示的內容 -->
            < 
router-view></router-view>
        </div>
    </div>
    

    <script src="https://cdn.bootcss.com/vue/2.6.0/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/2.6.0/vue-router.js"></script>

    <script>
        window.onload = function(){

            // routesArr 的作用是配置好跳轉路徑和跳轉之後的內容
            let routesArr = [
                {
                    path: ‘/home‘,
                    component: {
                        template:`<div>
                        <h1>這是首頁</h1>
                        </div>`
                    }
                },{
                    path: ‘/about‘,
                    component: {
                        template: `<div>
                            <p>這是關於我們頁</p>
                        </div>`
                    }
                },{
                    path: ‘/user/:name‘,    // :name的作用是動態訪問一個地址，比如傳進來的是張三，就顯示張三的信息
                    name: ‘user‘,   // 這個name的作用是配合第95行添加屬性用的，二者必須一致 
                    component: {
                        template: `<div>

                            <!-- $route.params的作用是接收傳進來的名字，例如傳張三 name就是張三 -->
                            <p>我叫：{{ $route.params.name }}</p>

                            <!-- $route.query的作用是接收url上 ?age=18 這樣的參數 例如 router.html#/user/張三?age=18 -->
                            <p>我今年：{{ $route.query.age }} 歲了</p>

                            <div>
                                <!-- append是為了給下面的children子路由傳數據 -->
                                <router-link to="more" append> 更多信息 </router-link>
                            </div>
                            
                            <!-- 這個router-view對應的就是children裏的template -->
                            <router-view></router-view>
                        </div>`
                    },
                    children:[
                        {
                            path: ‘more‘,
                            component: {
                                template:`
                                <div>
                                用戶：{{ $route.params.name }} 的詳細信息 abcd1234
                                </div>
                                `
                            }
                        }
                    ]
                }
                
            ];

            const vRouter = new VueRouter({
                routes: routesArr // 這裏要寫routes ，而不是routers，不然 <router-view> 沒數據
            })

            new Vue({
                el: ‘#div1‘,
                router: vRouter,
                methods: {
                    pushUser: function(){   
                        
                        // this.$router這個方法遍歷不到，但可以直接使用
                        this.$router.push({
                            name: ‘user‘,   // 和51行配合使用的，二者需一致
                            params: {
                                name: ‘王五‘
                            }
                        });
                    }
                }
            })
        }
    </script>
</body> 
</html>

Vue-router學習筆記——遇到的坑（一）history模式重新整理/設定巢狀路由顯示404/cannot find（webpack配置）

前端路由有兩種，一種是hash模式，一種是history模式。這兩種模式的url路徑都不需要真實存在，只需要為前端跳轉做一個顯示。 hash模式的url路徑會帶有#，看起來不太舒服且不好做SEO，但是因為瀏覽器向伺服器請求時會自動忽略#後面的值，所以在瀏覽器中重新整理還是

vue-router單頁應用簡單示例（一）

問題 clas 做了設置 new scope 文件的 log target 請先完成了項目初始化，具體請看我另一篇博文。vue項目初始化看一下完成的效果圖，很典型的單頁應用。 .vue後綴名的單文件組件這裏先說一下我對組件的理解。組件，顧名思義就是一組元素組成的

vue-router單頁應用簡單示例（二）

數據 prop tps div -1 可重用性 example 定位 .com 我們先來理一下思路。圖1:main.js 引入vue,App.vue,router/index.js文件聲明要渲染的Id為app，將App.vue中的模版渲染到入口界面（就

vue keep-alive儲存路由狀態1 （接下篇）

本文很長，但是很詳細，請耐心看完就一目瞭然了有下篇 keep-alive 是 Vue 內建的一個元件，使被包含的元件保留狀態，或避免重新渲染。 1. 基礎用法，快取所有路由： <keep-alive> 　　<router-view> 　　　　<!-- 這裡

手把手教你用vue-cli、webpack、vue-router、vue-resource構建單頁應用（SPA）

vue-cli webpack vue-router vue-resource vue-cli:一個官方釋出 vue.js 專案腳手架，使用 vue-cli 可以快速建立 vue 專案 webpack:是當下最熱門的前端資源模組化管理和打包工具。它可以將

vue-router之命名路由和命名視圖

font name屬性由來官方文檔 .html 完成 ima 改變 test ?記在前面 ——“我讀過很多書，但後來大部分都忘記了，那讀書的意義是什麽？” ——“當我還是孩子時，我吃過很多食物，現在已經記不起吃過什麽了。但可以肯定的是，它們中的一部分已經長成了我的骨

vue.js 跨域的解決方法（轉載）

vue專案中，前端與後臺進行資料請求或者提交的時候，如果後臺沒有設定跨域，前端本地除錯程式碼的時候就會報“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 這種跨域錯誤。要想本地正常的除錯，解決

vue—router巢狀路由設定及預設選擇

巢狀路由應用場景：用vue-router 設定一個頁面的路由的時候，在其頁面元件內也需要用到，用一個專案來舉例子我在app.vue中設定路由出口對其他頁面元件.設定路徑，比如home 首頁設定，在router資料夾index.js中設定 routes: [ { path:

vue-router 實現無效路由(404)的友好提示

最近在做一個基於vue-router的SPA，想對無效路由(404)頁面做下統一處理。這次我真的沒有在官方文件找到具體的說明[捂臉]所以本文僅是我DIY的一個思路，求輕虐=_= 在我的理解中，vue-router是根據path去匹配註冊的route，匹配到則載入對應的元件，匹配不到則重置(或者說清空)對應的

三十三、vue-router配置子路由

vue-router 宣告式路由導航和程式設計式路由導航

前提： $router：路由器物件 $route：當前路由資訊一、宣告式路由導航 ==>> 即<router-link> eg： <ro

vue-router動態載入路由

我們用vue開發一個帶許可權的管理系統。根據不用的使用者，顯示選單項不同場景：前端選單不是靜態的寫在vue程式裡，而是要從後臺介面中獲取的的選單列表來動態載入到vue應用中思路：1、登入成功的同時後臺會返回給我們選單列表，此時我們便在vue-router中插入這個選單所對應的路由配置

使用Vue-Router 2實現路由功能

注意：vue-router 2只適用於Vue2.x版本，下面我們是基於vue2.0講的如何使用vue-router 2實現路由功能。推薦使用npm安裝。 npm install vue-router 一、使用路由在main.js中，需要明確安裝路由功能： impo

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

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

用vue構建專案筆記5(在vue-cli專案中引用公用方法)（vue resource統一處理）

之前用cli腳手架構建的專案廢了，又讓我改成jq了，悲劇，這次這個專案用純vue實現了，哈哈。下面介紹如何引入全域性方法供每個元件都能呼叫。 1.建立一個js檔案，我起的名字叫做“common.js”，放在assets>js下。 2.在common.js檔案中寫入公用

vue-router動態註冊路由，實現無需註冊頁面可跳轉

demo工程地址：https://github.com/martSforever/test-router 先說一下特性：無需註冊頁面路由，可直接跳轉；頁面地址可以在資料庫中配置；頁面分包載入，進行頁面路由跳轉的時候才去載入頁面元

vue-router跳轉路由的幾種方式

// vue-router學習筆記記錄開發中的點點滴滴跳轉路由的幾種方式： 1、宣告式： 1) 根據路由路徑（/home/sort/detail）跳轉 <router-link :to="{path: '/home/sort/detail', query:{id: 'abc'

Vue-router巢狀路由的使用

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

vue-router在同一個路由下切換，取不到變化的路由引數

最近用vue寫專案的時候碰到一個問題，在同一個頁面下跳轉，路由地址不變，路由引數有變化，一開始只是在data裡取路由的引數，發現根本取不到變化的路由引數。在網上查找了一番後發現可以這樣寫： wat

Vue-Router嵌套路由

url 學生登錄 nts register viewport img ldr ice mpat 實際生活中的應用界面，通常由多層嵌套的組件組合而成。同樣地，URL 中各段動態路徑也按某種結構對應嵌套的各層組件，例如：借助 vue-router，使用嵌套路由配置，就可以很

快速理解 vue-router （vue路由）的使用方法（一）

相關推薦