Vue-router(vue路由基礎詳解)

JasinYip 發布于2019-08-21 16:26 / 455人閱讀

摘要：你可以在創建實例的時候，在配置中給某個路由設置名稱。如果沒有設置名字，那么默認為。

Vue.js路由(Vue-router) 安裝 直接引入

vue-router下載鏈接
https://unpkg.com/vue-router/...

npm下載

npm install vue-router

如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能：
在你的文件夾下的 src 文件夾下的 main.js 文件內寫入以下代碼

import Vue from "vue"
import VueRouter from "vue-router"

Vue.use(VueRouter)

開始

引入Vue和VueRouter插件

書寫html

書寫js

var routes = [
    {
        path:"/one",

        component:{template:"#a"}
    },
    {
        path:"/two",
        component:{template:"#b"}
    },
];
// 定義路由組件
var router = new VueRouter({
    routes
});
// 定義路由
new Vue({
    el:"#box",
    router
});
// 創建和掛載實例

將模版增添鏈接

 
    One
    Two

< router-link > 默認會被渲染成一個  標簽 >>>to=""為我們定義的路由

< router-view > 路由匹配到的組件將渲染在這里

動態路由匹配

我們經常需要把某種模式匹配到的所有路由，全都映射到同個組件。例如，我們有一個 User 組件，對于所有 ID 各不相同的用戶，都要使用這個組件來渲染。那么，我們可以在 vue-router 的路由路徑中使用『動態路徑參數』（dynamic segment）來達到這個效果：

{
    path:"/two:id",
    component:{template:"#b"},
},

當我們在地址后面直接添加任意字符,我們會發現文檔內容隨著我們的更改而改變.

嵌套路由

我們經常將動態路由和嵌套路由共同使用,嵌套路由即是在原路由的基礎上增加一個 children ,children 是一個數組.并且我們還需要在原來的組件上添加< router-view >來渲染 chlidren 里面的路由.

{
    path:"/two",
    component:{template:"#b"},
    children:[
        {
            path:":id",
            component:{
                template:"#c"
            }
        }
    ]
},

這樣我們就可以這樣添加地址

編程式導航

除了使用創建 a 標簽來定義導航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現。

router.push(location)

想要導航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。

當你點擊時，這個方法會在內部調用，所以說，點擊等同于調用 router.push(...)。

該方法的參數可以是一個字符串路徑，或者一個描述地址的對象。例如：

// 字符串
router.push("home")

// 對象
router.push({ path: "home" })

// 命名的路由
router.push({ name: "user", params: { userId: 123 }})

// 帶查詢參數，變成 /register?plan=private
router.push({ path: "register", query: { plan: "private" }})

router.replace(location)

跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄。

router.go(n)

這個方法的參數是一個整數，意思是在 history 記錄中向前或者后退多少步，類似 window.history.go(n)。

// 在瀏覽器記錄中前進一步，等同于 history.forward()
router.go(1)

// 后退一步記錄，等同于 history.back()
router.go(-1)

// 前進 3 步記錄
router.go(3)

// 如果 history 記錄不夠用，那就默默地失敗唄
router.go(-100)
router.go(100)

命名路由

有時我們通過一個名稱來標識一個路由顯得更方便一些，特別是在鏈接一個路由，或者是執行一些跳轉的時候。你可以在創建 Router 實例的時候，在 routes 配置中給某個路由設置名稱。

我們直接在路由下添加一個 name 即可.

var routes = [
    {
        path:"/one",
        name:"one",
        component:{template:"#a"}
    },
    {
        path:"/two",
        name:"two",
        component:{template:"#b"},
    },
]

要鏈接到一個命名路由，可以給 router-link 的 to 屬性傳一個對象：

User
User

命名視圖

有時候想同時（同級）展示多個視圖，而不是嵌套展示，例如創建一個布局，有 sidebar（側導航）和 main（主內容）兩個視圖，這個時候命名視圖就派上用場了。你可以在界面中擁有多個多帶帶命名的視圖，而不是只有一個多帶帶的出口。如果 router-view 沒有設置名字，那么默認為 default。

當我們的視圖如上時,我們會發現每一個路由被渲染了兩次,所以我們需要為視圖命名

var Foo = { template: "foo" }
var Bar = { template: "bar" }
var routes = [
        {
            path:"/one",
            name:"one",
            components:{
                a:Foo,
                b:Bar
            }
        },
    ]

重定向和別名 重定向

重定向(Redirect)就是通過各種方法將各種網絡請求重新定個方向轉到其它位置,用于網站調整或網頁被移到一個新地址,它也是通過 routes 配置來完成，下面例子是從 /a 重定向到 /b：

var router = new VueRouter({
  routes: [
    { path: "/a", redirect: "/b" }
  ]
})

別名

/a 的別名是 /b，意味著，當用戶訪問 /b 時，URL 會保持為 /b，但是路由匹配則為 /a，就像用戶訪問 /a 一樣。簡單的說就是給 /a 起了一個外號叫做 /b ,但是本質上還是 /a

上面對應的路由配置為：

var router = new VueRouter({
  routes: [
    { path: "/a", component: A, alias: "/b" }
  ]
})

『別名』的功能讓你可以自由地將 UI 結構映射到任意的 URL，而不是受限于配置的嵌套路由結構。

云服務器 GPU云服務器 vue-router 路由詳解 vue基礎教程 Vue_Vue

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88541.html

關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
詳解基于vue，vue-router, vuex以及addRoutes進行權限控制

摘要：基于的權限控制教程，完整代碼地址見接下來讓我們模擬一個普通用戶打開網站的過程，一步一步的走完整個流程。由于權限這塊邏輯還挺多，所以在添加了一個模塊來處理權限。基于vuex, vue-router,vuex的權限控制教程，完整代碼地址見 https://github.com/linrunzhen... 接下來讓我們模擬一個普通用戶打開網站的過程，一步一步的走完整個流程。首先從打開本...

eternalshallow 2019-08-26 11:53 評論0 收藏0
基于vue項目的知識總結

摘要：前言用有一段時間了，從用搭建項目一步步配置，到之后的研究動效這些，一直想寫些東西記錄一下做個總結，剛好趁著有空就整理一下。結語有新的知識點會更新到知識體系中，總結和心得體會會單獨寫文章詳述，努力填坑前言用vue有一段時間了，從用vue-cli搭建項目、一步步配置axios、vuex、vue-router，到之后的研究canvas、動效這些，一直想寫些東西記錄一下、做個總結，剛好趁著...

tianlai 2019-08-29 14:07 評論0 收藏0