vue-router 學習

Achilles 發布于2019-08-20 11:19 / 2586人閱讀

摘要：第一步路由配置項第二步路由映射全部精華路由參數是路由參數。和這兩行代碼，使用了用了具名路徑。對應路由配置中的，使用接收參數。

參考

vue-router文檔

使用Vue快速開發單頁應用 vue-router

Vue.js——vue-router 60分鐘快速入門
Demo:https://github.com/keepfool/vue-tutorials/blob/master/06.Router/basic/basic_04.html

路由配置

路由配置其實是分兩步的，第一步把vue-router的指令方法掛到Vue實例，第二步才是添加路由配置上。

import Vue from "vue"
import VueRouter from "vue-router"
import App from "App.vue"
Vue.use(VueRouter) // 第一步

//路由配置項:http://router.vuejs.org/zh-cn/options.html
const router = new VueRouter({
  hashbang = true,
  abstract = false,
  history = true,
  saveScrollPosition = true,
  transitionOnLoad = false,
  suppressTransitionError = false,
  root = null,
  linkActiveClass = "v-link-active"
}) // 第二步

//路由映射: http://router.vuejs.org/zh-cn/api/map.html
router.map({
    "/": {
      name: "index",
      title: "全部",
      component: (resolve) => require(["./components/main/index.vue"], resolve)
    },
    "/good": {
      name: "good",
      title: "精華",
      component: (resolve) => require(["./components/main/index.vue"], resolve)
    }
  })
router.start(App, "#app")

路由參數

import Home from "components/Home"
import News from "components/News"
import NewsDetail from "components/NewsDetail"
import Message from "components/Message"
import About from "components/About"
router.map({
    "/home": {
        component: Home,
        subRoutes: {
            "/news": {
                name: "news",
                component: News,
                subRoutes: {
                    "detail/:id": {
                        name: "detail",
                        component: NewsDetail
                    }
                }
            },
            "/message": {
                component: Message
            }
        }
    },
    "/about": {
        component: About
    }
})

/:id是路由參數。例如：如果要查看id = "01"的News詳情，那么訪問路徑是/home/news/detail/01。

News和News 01這兩行HTML代碼，使用了用了具名路徑。

params: {id: "01"}對應路由配置中的/:id，使用this.$route.parames.id接收params參數。
也可使用query: {id: "01"}傳參，然后使用this.$route.query.id接收參數

GPU云服務器云服務器 vue-router 學習機器學習學習機器學習學習深度學習學習

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

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

vue-router學習

vue-router使用步驟(本教程并不全面，只研究到了本人夠用的程度，如果還想要深入了解路由，請在vue router 文檔中學習)：手動： npm 安裝 vue-router npm install vue-router 配置路由 1. 在main.js同級目錄下（目錄結構不一定要和我完全一樣）新建router.js； 2. 在router.js中引用vue 和 vue-route...

elva 2019-08-26 13:38 評論0 收藏0
從頭開始學習vue-router

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。一、前言要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

tommego 2019-08-23 12:55 評論0 收藏0
從頭開始學習vue-router

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。一、前言要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

jhhfft 2019-08-02 11:56 評論0 收藏0
從頭開始學習vue-router

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。一、前言要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

frontoldman 2019-08-29 17:11 評論0 收藏0
Vue學習日記（三）——Vue路由管理vue-router

摘要：重定向可以實現某些需要根據特定邏輯改變頁面原本路由的需求，例如簡單的未登錄狀態下的頁面訪問個人信息路由時應該重定向到登錄路由頁面。前言為了給讀者更好的體驗，去理解vue-router和下一篇介紹vuex，決定還是來一個實戰教程來帶大家更加的去深入理解vue-router，在這之前，讀者先自行了解和去官網下載npm和node，附：npm官網項目構建這里我采用vue-cli+web...

iKcamp 2019-08-30 13:54 評論0 收藏0