国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

一步步從零開始學習vue-router

Cobub / 861人閱讀

摘要：前言一個包含的簡單，從第一個開始，依次深入學習，即可快速上手強大的。

前言

一個包含 vue-router的簡單demos，從第一個demo開始，依次深入學習，即可快速上手強大的vue-router。

如何使用

安裝模塊pure 或 http-server來啟動服務器

npm install -g puer or npm install -g http-server

克隆倉庫

啟動服務
http-server -p 8000 or puer -p 8000,瀏覽器自動打開 localhost:8000

什么是Vue-router

vue.js官方的路由，深度結(jié)合了vue.js核心內(nèi)容，可以很方便的創(chuàng)建單頁面應用(PWA)，具有如下特點:

嵌套路由/視圖

模塊化、基于組件的配置

路由參數(shù)、查詢

與vue.js一樣的視圖過渡效果

github source

Demo 01 - start

一個快速上手vue-router的例子

index.html

js file

const Home = {template: "
Home page
"}
const About = {template: "
About page
"}
const router = new VueRouter({
  routes: [
    {path:"/home",component:Home},
    {path:"/about",component:About},
  ]
})
new Vue({
  router,
}).$mount("#app")
Demo 02 - dynamic router

動態(tài)路由匹配，匹配同一個路由下的子路由，如/about/xin和/about/mine,:id 為參數(shù)

index.html

js file

const About = {template: "
About page: {{$route.params.id}}
"}
const router = new VueRouter({
  routes: [
    {path:"/about/:id",component:About},
  ]
})
new Vue({
  router,
}).$mount("#app")
Demo 03 - nested router

嵌套路由

index.html

js file

const Home = {template: "
Home page
"}
const AboutProfile = {template: "
AboutProfile
"}
const AboutEdit = {template: "
AboutEdit
"}
const About = {
  template: `
  

    {{$route.params.id}}
    
  

  `
}
const router = new VueRouter({
  routes: [
    {path:"/home",component:Home},
    {
      path:"/about/:id",
      component:About,
      children: [
        {path:"profile",component: AboutProfile,},
        {path:"edit",component: AboutEdit,}
      ]
    },
  ]
})
new Vue({
  router,
}).$mount("#app")
Demo 04 - nested router children router

嵌套路由，通過在一個路由里面設(shè)置children，即可嵌套路由，子路由下的嵌套設(shè)置與主路由的設(shè)置是一樣的

index.html

js file

const About = {
  template: `
About
`
}
const User = {
  template: `
    

      
user-{{ $route.params.id }}
 
      
    

  `
}
const UserStart = {
  template: `
    
  `
}
const UserProfile = {
  // /user/xin
  template: `
    
  `
}
const router = new VueRouter({
  routes: [
    {path: "/about", component: About},
    {path: "/user", component: User,
      children: [
        {path: "", component: UserStart},
        {path: ":id", component: UserProfile},
    ]}
  ]
})
new Vue({
  router,
}).$mount("#app")
Demo 05 - nested router with query params

嵌套路由，帶查詢參數(shù)，$route.query下為所查詢的參數(shù)，通過:to綁定參數(shù)，與to功能一致

index.html

js file

const About = {
  template: `
About
`
}
const User = {
  template: `
    

     
user-{{ $route.params.id }}

      
    

  `
}
const UserStart = {
  template: `
    
  `
}
const UserProfile = {
  // /user/xin
  data() {
    return {
      id: this.$route.params.id,
    }
  },
  template: `
    

      
id: {{id}}

      
        edit
      
    

  `
}
const UserEdit = {
  // /user/xin/edit
  template: `
    

      
local: {{$route.query.local}}

      
limit: {{$route.query.limit}}

    

  `
}
const router = new VueRouter({
  routes: [
    {path: "/about", component: About},
    {path: "/user", component: User,
      children: [
        {path: "", component: UserStart},
        {path: ":id", component: UserProfile},
        {path: ":id/edit", component: UserEdit,name:"userEdit"},
    ]}
  ]
})
Demo 06 - programed nav router

this.$router.push("/")與 功能一致

index.html

js file

const Home = {
  template: `
  
Home page

  `,
}
const About = {template: "
About page: {{$route.params.id}}
"}
const router = new VueRouter({
  routes: [
    {path:"/home",component:Home},
    {path:"/about/:id",component:About},
  ]
})
new Vue({
  router,
  methods: {
    nav2home() {
      this.$router.push("/")
    }
  }
}).$mount("#app")
Demo 07 - named router

可以通過給路由命名，并通過綁定屬性:to的方式來定義路由

index.html

js file

const User = {
  template: `
  
user page

  `,
}
const About = {template: "
About page: {{$route.params.id}}
"}
const router = new VueRouter({
  routes: [
    {
      path:"/user/:userId",
      component: User,
      name: "user"
    },
    {path:"/about/:id",component:About},
  ]
})
new Vue({
  router,
  methods: {
    nav2home() {
      console.log(this.$router);
      this.$router.push("/")
    }
  }
}).$mount("#app")
Demo 08 - named views

命名視圖，可以指定多個來渲染顯示視圖，并可設(shè)置默認視圖

index.html

js file

const Dasiy = {template: `
1. Daisy
`};
const Lily = {template: `
2. Lily
`};
const Violet = {template: `
3. Violet
`};
const router = new VueRouter({
  routes: [{
    path: "/",
    components: {
      default: Dasiy, // default router
      a: Lily,
      b: Violet,
    }
  },
  {
    path: "/my",
    components: {
      default: Lily, // default router
      a: Violet,
      b: Dasiy,
    }
  }]
})
router.push("/")
new Vue({
  router,
}).$mount("#app")
Demo 09 - named views with nested router

嵌套路由中使用命名視圖

index.html

js file

const Navbar = {
  template: `
  

    phone
    email
  

  `
}
// 添加了普通組件nav
const UserDetail = {
  template: `
    

      
      
      
      
    

  `,
  components: {Navbar}
}
// 路由匹配 /user/phone
const UserPhone = {
  template: `
    

      My phone
    

  `
}
// 路由匹配 /user/email
const UserEmail = {
  template: `
    

      My email
    

  `
}
const UserEmailhelp = {
  template: `
    

      My email help
    

  `
}
const router = new VueRouter({
  routes: [
    {
      path: "/user",
      component: UserDetail,
      children: [
        {path: "phone", component: UserPhone},
        {
          path: "email",
          // 路由匹配到/user/email時，當有多個router-view時
          // 將會根據(jù)視圖的別名分別進行渲染，沒有別名渲染默認的模板
          components: {
            default: UserEmail,
            help: UserEmailhelp,
          }
        }
      ]
    }
  ]
})
router.push("/user")
new Vue({
  router,
}).$mount("#app")
Demo 10 - redirect

路由的重定向，訪問/about將會跳轉(zhuǎn)到/xin

index.html

js file

const About = {template: "
About page
"}
const Xin = {template: "
Xin page
"}
const router = new VueRouter({
  routes: [
    {path:"/about",redirect: "/xin"},
    {path:"/xin",component:Xin},
  ]
})
router.push("/")
new Vue({
  router,
}).$mount("#app")
Demo 11 - alais

路由的別名,訪問/about與/xin的內(nèi)容是一樣的，共用一個組件

index.html

js file

const About = {template: "
About page
"}
const Xin = {template: "
Xin page
"}
const router = new VueRouter({
  routes: [
    {path: "/about", component: About, alias: "/xin"}
  ]
})
router.push("/")
new Vue({
  router,
}).$mount("#app")

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/95297.html

相關(guān)文章

  • 前端每周清單第 54 期: SwiftNIO, 自定義 vue-router, Web 緩存與 Gr

    摘要：新聞熱點國內(nèi)國外，前端最新動態(tài)蘋果開源了版近日，蘋果開源了一款基于事件驅(qū)動的跨平臺網(wǎng)絡應用程序開發(fā)框架，它有點類似，但開發(fā)語言使用的是。蘋果稱的目標是幫助開發(fā)者快速開發(fā)出高性能且易于維護的服務器端和客戶端應用協(xié)議。 showImg(https://segmentfault.com/img/remote/1460000013677379); 前端每周清單專注大前端領(lǐng)域內(nèi)容，以對外文資料的...

    劉東 評論0 收藏0

  • 前方來報，八月最新資訊--關(guān)于vue2&3的最佳文章推薦

    摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...

    izhuhaodev 評論0 收藏0

  • 后端開發(fā)者從零做一個移動應用（后端篇）

    摘要：后端開發(fā)的疑惑后端開發(fā)最常面對的一個問題性能高并發(fā)等等。而到了時代，在方面有了前后端分離概念移動后端更是無力渲染天然前后端分離。 先來上一張前端頁面的效果圖（Vue + Vux + Vuex + Vue-Router）。showImg(https://segmentfault.com/img/remote/1460000010207850); 第一次做gif 沒什么經(jīng)驗，太大了。加載...

    codergarden 評論0 收藏0

  • 從零開始實現(xiàn)一個簡易的Java MVC框架

    摘要：不過仔細了解了一段時候發(fā)現(xiàn)，其實他的原理是很簡單的，所以想要自己也動手實現(xiàn)一個功能類似的框架。原文地址從零開始實現(xiàn)一個簡易的框架 前言 最近在看spring-boot框架的源碼，看了源碼之后更是讓我感受到了spring-boot功能的強大。而且使用了很多的設(shè)計模式，讓人在看的時候覺得有點難以下手。 不過仔細了解了一段時候發(fā)現(xiàn)，其實他的原理是很簡單的，所以想要自己也動手實現(xiàn)一個功能類似的...

    neuSnail 評論0 收藏0

發(fā)表評論

0條評論

Cobub

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<