一步步從零開始進修vue-router

2023年12月8日 130次阅读 来源: 窗里窗外

媒介

一個包括 vue-router的簡樸demos，從第一個demo最先，順次深切進修，即可疾速上手壯大的vue-router。

怎樣運用

  1. 裝置模塊pure 或 http-server來啟動效勞器

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

  2. 克隆堆棧
  3. 啟動效勞
    http-server -p 8000 or puer -p 8000,瀏覽器自動翻開 localhost:8000

什麼是Vue-router

vue.js官方的路由，深度連繫了vue.js核心內容，能夠很輕易的建立單頁面運用(PWA)，具有以下特性:

  • 嵌套路由/視圖
  • 模塊化、基於組件的設置
  • 路由參數、查詢
  • 與vue.js一樣的視圖過渡結果

github source

Demo 01 – start

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

index.html

  <ul>
    <router-link to="/home" tag="li">
      <a>/home</a>
    </router-link>
    <router-link to="/about" tag="li">
      <a>/about</a>
    </router-link>
  </ul>
  
  <router-view></router-view>

js file

const Home = {template: '<div>Home page</div>'}
const About = {template: '<div>About page</div>'}
const router = new VueRouter({
  routes: [
    {path:'/home',component:Home},
    {path:'/about',component:About},
  ]
})
new Vue({
  router,
}).$mount('#app')

Demo 02 – dynamic router

動態路由婚配，婚配同一個路由下的子路由，如/about/xin和/about/mine,:id 為參數

index.html

<ul>
    <router-link to="/about/mint" tag="li">
      <a>/about/mint</a>
    </router-link>
    <router-link to="/about/xin" tag="li">
      <a>/about/xin</a>
    </router-link>
  </ul>
  
  <router-view></router-view>

js file

const About = {template: '<div>About page: {{$route.params.id}}</div>'}
const router = new VueRouter({
  routes: [
    {path:'/about/:id',component:About},
  ]
})
new Vue({
  router,
}).$mount('#app')

Demo 03 – nested router

嵌套路由

index.html

<ul>
    <router-link to="/" tag="li">
      <a>主頁</a>
    </router-link>
    <router-link to="/about/mint" tag="li">
      <a>/about/mint</a>
    </router-link>
    <router-link to="/about/mint/profile" tag="li">
      <a>/about/mint/profile</a>
    </router-link>

    <router-link to="/about/xin" tag="li">
      <a>/about/xin</a>
    </router-link>
    <router-link to="/about/xin/edit" tag="li">
      <a>/about/xin/edit</a>
    </router-link>
  </ul>

  <router-view></router-view>

js file

const Home = {template: '<div>Home page</div>'}
const AboutProfile = {template: '<div>AboutProfile</div>'}
const AboutEdit = {template: '<div>AboutEdit</div>'}
const About = {
  template: `
  <div>
    {{$route.params.id}}
    <router-view></router-view>
  </div>
  `
}
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

嵌套路由，經由過程在一個路由內里設置children，即可嵌套路由，子路由下的嵌套設置與主路由的設置是一樣的

index.html

<ul>
    <router-link to="/about" tag="li">
      <a>About</a>
    </router-link>
    <router-link to="/user" tag="li">
      <a>User</a>
    </router-link>
  </ul>
  <div>
    <router-view></router-view>
  </div>

js file

const About = {
  template: `<div>About</div>`
}
const User = {
  template: `
    <div>
      <h2>user-{{ $route.params.id }}</h2> 
      <router-view></router-view>
    </div>
  `
}
const UserStart = {
  template: `
    <div>
      <router-link to="/user/xin" tag="li">
        <a>user-xin</a>
      </router-link>
      <router-link to="/user/mint" tag="li">
        <a>user-mint</a>
      </router-link>
    </div>
  `
}
const UserProfile = {
  // /user/xin
  template: `
    <div>
      <router-link to="/user/xin/edit" tag="li">
        <a>user-xin-edit</a>
      </router-link>
      <router-link to="/user/mint/edit" tag="li">
        <a>user-mint-edit</a>
      </router-link>
    </div>
  `
}
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

嵌套路由，帶查詢參數，$route.query下為所查詢的參數，經由過程:to綁定參數，與to功用一致

index.html

<ul>
    <router-link to="/about" tag="li">
      <a>About</a>
    </router-link>
    <router-link to="/user" tag="li">
      <a>User</a>
    </router-link>
  </ul>
  <div>
    <router-view></router-view>
  </div>

js file

const About = {
  template: `<div>About</div>`
}
const User = {
  template: `
    <div>
     <h2>user-{{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}
const UserStart = {
  template: `
    <div>
      <router-link to="/user/xin" tag="li">
        <a>user-xin</a>
      </router-link>
      <router-link to="/user/mint" tag="li">
        <a>user-mint</a>
      </router-link>
      <router-view></router-view>
    </div>
  `
}
const UserProfile = {
  // /user/xin
  data() {
    return {
      id: this.$route.params.id,
    }
  },
  template: `
    <div>
      <p>id: {{id}}</p>
      <router-link tag="button" :to="{name: 'userEdit',params:{id},query:{local:'zh-cn',limit:100}}">
        edit
      </router-link>
    </div>
  `
}
const UserEdit = {
  // /user/xin/edit
  template: `
    <div>
      <p>local: {{$route.query.local}}</p>
      <p>limit: {{$route.query.limit}}</p>
    </div>
  `
}
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('/')與 <router-link to="/"> </router-link>功用一致

index.html

  <ul>
    <router-link to="/about/mint" tag="li">
      <a>/about/mint</a>
    </router-link>
    <router-link to="/about/xin" tag="li">
      <a>/about/xin</a>
    </router-link>
  </ul>
  <button @click="nav2home">home</button>
  
  <router-view></router-view>

js file

const Home = {
  template: `
  <div>Home page</div>
  `,
}
const About = {template: '<div>About page: {{$route.params.id}}</div>'}
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

  <ul>
      <router-link :to="{name: 'user',params:{userId:26}}" tag="li">
        <a>/user/26</a>
      </router-link>
    <router-link to="/about/mint" tag="li">
      <a>/about/mint</a>
    </router-link>
    <router-link to="/about/xin" tag="li">
      <a>/about/xin</a>
    </router-link>
  </ul>
  <button @click="nav2home">home</button>
  
  <router-view></router-view>

js file

const User = {
  template: `
  <div>user page</div>
  `,
}
const About = {template: '<div>About page: {{$route.params.id}}</div>'}
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

定名視圖，能夠指定多個<router-view>來襯着顯現視圖，並可設置默許視圖

index.html

  <ul>
     <router-link to="/" tag="li"><a>/</a></router-link>
     <router-link to="/my" tag="li"><a>/my</a></router-link>
  </ul>
  
  <router-view class="view"></router-view>
  <router-view class="view" name="a"></router-view>
  <router-view class="view" name="b"></router-view>

js file

const Dasiy = {template: `<div>1. Daisy</div>`};
const Lily = {template: `<div>2. Lily</div>`};
const Violet = {template: `<div>3. Violet</div>`};
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

 <div class="router-view">
     <router-view></router-view>
   </div>

js file

const Navbar = {
  template: `
  <div>
    <router-link to="/user/phone">phone</router-link>
    <router-link to="/user/email">email</router-link>
  </div>
  `
}
// 添加了一般組件nav
const UserDetail = {
  template: `
    <div>
      <Navbar></Navbar>
      <router-view ></router-view>
      <!-- 下面這個不一定會襯着-->
      <router-view name="help"></router-view>
    </div>
  `,
  components: {Navbar}
}
// 路由婚配 /user/phone
const UserPhone = {
  template: `
    <div>
      My phone
    </div>
  `
}
// 路由婚配 /user/email
const UserEmail = {
  template: `
    <div>
      My email
    </div>
  `
}
const UserEmailhelp = {
  template: `
    <div>
      My email help
    </div>
  `
}
const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: UserDetail,
      children: [
        {path: 'phone', component: UserPhone},
        {
          path: 'email',
          // 路由婚配到/user/email時，當有多個router-view時
          // 將會依據視圖的別號離別舉行襯着，沒有別號襯着默許的模板
          components: {
            default: UserEmail,
            help: UserEmailhelp,
          }
        }
      ]
    }
  ]
})
router.push('/user')
new Vue({
  router,
}).$mount('#app')

Demo 10 – redirect

路由的重定向，接見/about將會跳轉到/xin

index.html

  <ul>
    <router-link to="/about" tag="li">
      <a>/about => /xin</a>
    </router-link>
  </ul>
  
  <router-view></router-view>

js file

const About = {template: '<div>About page</div>'}
const Xin = {template: '<div>Xin page</div>'}
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的內容是一樣的，共用一個組件

index.html

<ul>
    <router-link to="/about" tag="li">
      <a>/about</a>
    </router-link>
    <router-link to="/xin" tag="li">
      <a>/xin</a>
    </router-link>
  </ul>
  
  <router-view></router-view>

js file

const About = {template: '<div>About page</div>'}
const Xin = {template: '<div>Xin page</div>'}
const router = new VueRouter({
  routes: [
    {path: '/about', component: About, alias: '/xin'}
  ]
})
router.push('/')
new Vue({
  router,
}).$mount('#app')
    原文作者：窗里窗外
    原文地址: https://segmentfault.com/a/1190000015049704
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞